Table标题行冻结,数据行滚动的一种方式

时间:2021-04-18 01:21:09

这段时间在做Table标题行冻结,数据行滚动,虽然能实现,但也遇到一些问题,记录下来。

首先说说实现,实现其实不难,估计很多人都能想象出来,那就是标题行与内容行分离。我是这么做的,用两个表格,一个只有thead,一个只有tbody,两个表格的列数量是完全相等的,而且相同的列宽度完全相等。这样两个表格合并在一起的时候,就感觉是一个表格一样。

但问题来了,就是当滚动条的时候,滚动条会占掉一部分宽度,导致数据表的总宽变小,从而导致数据表每个单元格的宽度被不同程度挤压,这样,表头与数据的边框就无法对齐了。

解决办法是,在外层套一个DIV,overflow用hidden,然后把数据表的宽度设置为calc(100% + 16px),这样,就把滚动条推到右边去隐藏掉,从而表格单元格也正常了。