• 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>

    效果图如下:

  • 相关阅读:
    Qt判断文件夹是否存在并新建文件夹
    QFileDialog的使用
    C++11 std::chrono库详解
    disconnected no supported authentication methods available(server sent: publickey)
    connect函数的第5参数Qt::ConnectionType
    在C++ 中检查一个文件是否存在的几种方法
    win10打开便签
    1024. Palindromic Number (25)
    1023. Have Fun with Numbers (20)
    1021. Deepest Root (25)
  • 原文地址:https://www.cnblogs.com/qianxunpu/p/7047843.html
Copyright © 2020-2023  润新知