近期开发一个小项目,由于项目本身比较小巧,所以也没考虑使用ui框架,项目纯手写html+css+js,由于页面的表格数据后台没有返回分页数据,导致整个表格集体向上滑动,故产品提出将table表格表头固定的小需求
尝试了很多种方法,thead不能单独脱离出来,否则整个table就瘫痪了,在无意中发现了一个合并表头的小技巧,完美解决当前的这个表头固定的小需求,下面让我们一起看一下展示效果吧:
接下来我们来看代码实现思路吧:【可能有小伙伴会提出疑问,不要急下面我会为大家解读要点:】
<!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;background-color: skyblue;}
.tableBox .aq_table .aq_tbody tr:nth-child(odd) {height: 58px;line-height: 58px;background-color: pink;}
.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>
相信你们的疑问肯定是这里吧:
<!--
<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>
当然有的人可能不使用table做表格数据的渲染,其实我觉得table还是很方便的,能够自适应浏览器的宽度
亲测:IE浏览器包括:ie9及以上ie浏览器支持,360极速浏览器极速模式支持,兼容模式支持【这个兼容模式貌似没有ie浏览器的准确,竟然在360的兼容模式仿真效果完美兼容,火狐浏览器也是完美兼容的】