看了element-ui的table实现方法
https://element.eleme.cn/2.0/#/zh-CN/component/table
然后发现也是用了<colgroup>
精髓就是在这<colgroup>：
<!--
<colgroup>
<col style="width: 10%" />
</colgroup>
这个闭合标签<colgroup></colgroup>是什么意思呢？
<colgroup></colgroup>这个标签的意思就是用来拼接表格的作用，也就是说第一个table和第二个table拼接在一起，
然而内部<col/>这个标签的作用是：这个标签用来表示我们thead内部的th/td数量，
也就是我们所说的列数，那么每一列的宽度尺寸我们就直接赋值给这个<col/>标签就可以了，
是不是很方便，加上这个标签就可以轻松实现固定表头，tbody做拉抽屉的效果了，另外我们thead内部有多少列，
我们就要在<colgroup></colgroup>内部写入的<col/>与thead内部的th/td数量相等
-->
<colgroup>
<col style="width: 10%" />
<col style="width: 10%" />
<col style="width: 10%" />
<col style="width: 15%" />
<col style="width: 25%" />
<col style="width: 30%" />
</colgroup>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.tableBox .aq_table {width: 100%;text-align: center;border-collapse: collapse;border: 1px solid #ccc;}
.tableBox .aq_table .aq-thead th {color: #ccc !important;}
.tableBox .aq_table .aq_tbody tr:nth-child(even) {height: 58px;line-height: 58px;}
.tableBox .aq_table .aq_tbody tr:nth-child(odd) {height: 58px;line-height: 58px;}
.div_tbody {width: 100%;height: 200px;overflow-y: auto;}
</style>
</head>
<body>
<div class="tableBox">
<!-- 固定表头 -->
<div class="div_thead" style="padding-right: 17px">
<table class="aq_table" border="" cellspacing="" cellpadding="">
<colgroup>
<col style="width: 10%" />
<col style="width: 10%" />
<col style="width: 10%" />
<col style="width: 15%" />
<col style="width: 25%" />
<col style="width: 30%" />
</colgroup>
<thead class="aq_thead">
<tr style="height: 58px;line-height: 58px;background-color: #f1f1f1">
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>工作</th>
<th>出生年月</th>
<th>现居住址</th>
</tr>
</thead>
</table>
</div>
<!-- 抽动的tbody -->
<div class="div_tbody" style="height: 200px; overflow-y: auto;">
<table class="aq_table" border="" cellspacing="" cellpadding="">
<colgroup>
<col style="width: 10%" />
<col style="width: 10%" />
<col style="width: 10%" />
<col style="width: 15%" />
<col style="width: 25%" />
<col style="width: 30%" />
</colgroup>
<tbody class="aq_tbody">
<tr>
<td>刘德华</td>
<td>男</td>
<td>56</td>
<td>演员</td>
<td>1966-06-28</td>
<td>香港特别行政区</td>
</tr>
<tr>
<td>陈港生</td>
<td>男</td>
<td>56</td>
<td>演员</td>
<td>1966-06-28</td>
<td>香港特别行政区</td>
</tr>
<tr>
<td>郑伊健</td>
<td>男</td>
<td>56</td>
<td>演员</td>
<td>1966-06-28</td>
<td>香港特别行政区</td>
</tr>
<tr>
<td>陈小春</td>
<td>男</td>
<td>56</td>
<td>演员</td>
<td>1966-06-28</td>
<td>香港特别行政区</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
374
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
