table多表头行布局

  1   <table class="table table-border table-bordered table-bg table-striped">
  2         <tr class="text-c">
  3             <th style="background-color:#f1f1f1">角色名称</th>
  4             <td colspan="3" id="rolename"></td>
  5         </tr>
  6         <tr class="text-c" style="background-color:#f1f1f1">
  7             <th width="80px">一级</th>
  8             <th width="80px">二级</th>
  9             <th width="80px">三级</th>
 10             <th>权限配置细则</th>
 11         </tr>
 12         <tr class="text-c">
 13             <td rowspan="7">工程管理</td>
 14             <td rowspan="2">项目规划</td>
 15             <td>工程项目</td>
 16             <td>
 17                 <div class="check-box">
 18                     <input type="checkbox" checked>
 19                     <label for="checkbox-1">添加</label>
 20                 </div>
 21                 <div class="check-box">
 22                     <input type="checkbox" checked>
 23                     <label for="checkbox-2">编辑</label>
 24                 </div>
 25                 <div class="check-box">
 26                     <input type="checkbox"  checked>
 27                     <label for="checkbox-3">审核</label>
 28                 </div>
 29                 <div class="check-box">
 30                     <input type="checkbox"  checked>
 31                     <label for="checkbox-4">浏览</label>
 32                 </div>
 33             </td>
 34         </tr>
 35         <tr class="text-c">
 36             <td>项目标段</td>
 37             <td>
 38                 <div class="check-box">
 39                     <span class="label label-primary radius">添加</span>
 40                 </div>
 41                 <div class="check-box">
 42                     <span class="label label-primary radius">修改</span>
 43                 </div>
 44                 <div class="check-box">
 45                     <span class="label label-primary radius">删除</span>
 46                 </div>
 47                 <div class="check-box">
 48                     <span class="label label-primary radius">查看</span>
 49                 </div>
 50                 <div class="check-box">
 51                     <span class="label label-primary radius">浏览</span>
 52                 </div>
 53             </td>
 54         </tr>
 55         <tr class="text-c">
 56             <td rowspan="5">工程规划</td>
 57             <td>桥梁基桩</td>
 58             <td>
 59                 <div class="check-box">
 60                     <input type="checkbox" id="checkbox-1" checked>
 61                     <label for="checkbox-1">添加</label>
 62                 </div>
 63                 <div class="check-box">
 64                     <input type="checkbox" id="checkbox-2" checked>
 65                     <label for="checkbox-2">编辑</label>
 66                 </div>
 67                 <div class="check-box">
 68                     <input type="checkbox" id="checkbox-3" checked>
 69                     <label for="checkbox-3">审核</label>
 70                 </div>
 71                 <div class="check-box">
 72                     <input type="checkbox" id="checkbox-4" checked>
 73                     <label for="checkbox-4">浏览</label>
 74                 </div>
 75                 <div class="check-box">
 76                     <input type="checkbox" id="checkbox-5" checked>
 77                     <label for="checkbox-5">删除</label>
 78                 </div>
 79                 <div class="check-box">
 80                     <input type="checkbox" id="checkbox-6" checked>
 81                     <label for="checkbox-6">复核</label>
 82                 </div>
 83                 <div class="check-box">
 84                     <input type="checkbox" id="checkbox-7" checked>
 85                     <label for="checkbox-6">打印</label>
 86                 </div>
 87             </td>
 88         </tr>
 89         <tr class="text-c">
 90             <td>地基处理桩</td>
 91             <td>增删查改</td>
 92         </tr>
 93         <tr class="text-c">
 94             <td>填料压实质量</td>
 95             <td>增删查改</td>
 96         </tr>
 97         <tr class="text-c">
 98             <td>路基附属</td>
 99             <td>增删查改</td>
100         </tr>
101         <tr class="text-c">
102             <td>隧道</td>
103             <td>增删查改</td>
104         </tr>
105         <tr class="text-c">
106             <td rowspan="6">单位管理</td>
107             <td>单位信息</td>
108             <td>无</td>
109             <td>
110                 <div class="check-box">
111                     <span class="label label-primary radius">添加</span>
112                 </div>
113                 <div class="check-box">
114                     <span class="label label-primary radius">修改</span>
115                 </div>
116                 <div class="check-box">
117                     <span class="label label-primary radius">删除</span>
118                 </div>
119                 <div class="check-box">
120                     <span class="label label-primary radius">查看</span>
121                 </div>
122                 <div class="check-box">
123                     <span class="label label-primary radius">浏览</span>
124                 </div>
125             </td>
126         </tr>
127         <tr class="text-c">
128             <td>单位人员</td>
129             <td>无</td>
130             <td>
131                 <div class="check-box">
132                     <span class="label label-primary radius">添加</span>
133                 </div>
134                 <div class="check-box">
135                     <span class="label label-primary radius">修改</span>
136                 </div>
137                 <div class="check-box">
138                     <span class="label label-primary radius">删除</span>
139                 </div>
140                 <div class="check-box">
141                     <span class="label label-primary radius">查看</span>
142                 </div>
143                 <div class="check-box">
144                     <span class="label label-primary radius">浏览</span>
145                 </div>
146             </td>
147         </tr>
148         <tr class="text-c">
149             <td>检测设备</td>
150             <td>无</td>
151             <td>
152                 <div class="check-box">
153                     <span class="label label-primary radius">添加</span>
154                 </div>
155                 <div class="check-box">
156                     <span class="label label-primary radius">修改</span>
157                 </div>
158                 <div class="check-box">
159                     <span class="label label-primary radius">删除</span>
160                 </div>
161                 <div class="check-box">
162                     <span class="label label-primary radius">查看</span>
163                 </div>
164                 <div class="check-box">
165                     <span class="label label-primary radius">浏览</span>
166                 </div>
167             </td>
168         </tr>
169         <tr class="text-c">
170             <td>单位相关文档</td>
171             <td>无</td>
172             <td>
173                 <div class="check-box">
174                     <span class="label label-primary radius">添加</span>
175                 </div>
176                 <div class="check-box">
177                     <span class="label label-primary radius">修改</span>
178                 </div>
179                 <div class="check-box">
180                     <span class="label label-primary radius">删除</span>
181                 </div>
182                 <div class="check-box">
183                     <span class="label label-primary radius">查看</span>
184                 </div>
185                 <div class="check-box">
186                     <span class="label label-primary radius">浏览</span>
187                 </div>
188             </td>
189         </tr>
190         <tr class="text-c">
191             <td>人员相关文档</td>
192             <td>无</td>
193             <td>
194                 <div class="check-box">
195                     <span class="label label-primary radius">添加</span>
196                 </div>
197                 <div class="check-box">
198                     <span class="label label-primary radius">修改</span>
199                 </div>
200                 <div class="check-box">
201                     <span class="label label-primary radius">删除</span>
202                 </div>
203                 <div class="check-box">
204                     <span class="label label-primary radius">查看</span>
205                 </div>
206                 <div class="check-box">
207                     <span class="label label-primary radius">浏览</span>
208                 </div>
209             </td>
210         </tr>
211         <tr class="text-c">
212             <td>设备相关文档</td>
213             <td>无</td>
214             <td>
215                 <div class="check-box">
216                     <span class="label label-primary radius">添加</span>
217                 </div>
218                 <div class="check-box">
219                     <span class="label label-primary radius">修改</span>
220                 </div>
221                 <div class="check-box">
222                     <span class="label label-primary radius">删除</span>
223                 </div>
224                 <div class="check-box">
225                     <span class="label label-primary radius">查看</span>
226                 </div>
227                 <div class="check-box">
228                     <span class="label label-primary radius">浏览</span>
229                 </div>
230             </td>
231         </tr>
232     </table>

效果图如下：

 

转载于:https://www.cnblogs.com/qianxunpu/p/7047843.html