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>
效果图如下：
