table 固定表头

  |   0 评论   |   0 浏览

前言

以前固定表头都是用一些插件啥的,但是最近项目中,遇到了需要对原生 table 表头固定的需求,还蛮头疼得,网上查了很多资料,遇到很多问题,这里记录一下,免得以后遇到同样的问题。

具体实现

首先需要修改 table 的 layout 修改成 fixed

table-layout:fixed;

table-layout 属性的作用以及使用 参照

https://www.w3school.com.cn/cssref/pr_tab_table-layout.asp

接着,如果想让某个单元格在滚动的时候固定,需要设置如下属性

position:-webkit-sticky;
position:sticky;

然后设置 left、top、right、bottom 属性,例如

left:0px;

其中 0px 代表 单元格距离 table 左边界的距离

通过以上 CSS 的设置可以让表头固定。

遇到的问题

通过上面的 方法可以让 表头固定,但是如果让多列 ,或者多行固定的时候,就会出现一些比较棘手的小问题。

边框不跟着单元格固定

在固定多列或多行的时候,两列中间会出现小缝隙(大小为边框的宽度)。

如何解决

我在网上查了好久,终于找到了解决方案

https://www.coder.work/article/1757065

其实就是自己画一个边框。


标题:table 固定表头
作者:zh847707713
地址:http://lovehao.cn/articles/2020/09/02/1599015875438.html