三行css拿下表格头部固定不动

1,579 阅读1分钟
表头固定不动

在做项目的时候经常会遇到某个表格,数据太多,需要可以进行上下滑动(这个很简单,只需要给表格设置一个最大高度,和overflow:hidden即可)

然而当数据很多的时候,用户滑到下面的时候,忘记了某一列代表的含义,这个时候用户需要滑到最上面再滑下来,这样用户体验很不好

解决办法:

将表头固定,用户不管滑到哪里,都可以清楚的知道每一列代表的含义

代码:

只需要给表格的thead标签加上如下代码即可(简单高效)

position:sticky;
top:0px;
z-index:1;

下面是菜鸟关于sticky的讲解

image.png 2021-12-20 17:46