表格【table标签】固定表头小技巧

最新推荐文章于 2024-04-19 20:39:07 发布

皮蛋灬

最新推荐文章于 2024-04-19 20:39:07 发布

阅读量5.9k

点赞数

本文链接：https://blog.csdn.net/vscode_js/article/details/81974948

版权

近期开发一个小项目，由于项目本身比较小巧，所以也没考虑使用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的兼容模式仿真效果完美兼容，火狐浏览器也是完美兼容的】

皮蛋灬

关注

0
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
表格【table标签】固定表头小技巧

近期开发一个小项目，由于项目本身比较小巧，所以也没考虑使用ui框架，项目纯手写html+css+js，由于页面的表格数据后台没有返回分页数据，导致整个表格集体向上滑动，故产品提出将table表格表头固定的小需求尝试了很多种方法，thead不能单独脱离出来，否则整个table就瘫痪了，在无意中发现了一个合并表头的小技巧，完美解决当前的这个表头固定的小需求，下面让我们一起看一下展示效果吧：...
复制链接

扫一扫