table固定thead，滚动效果，多种思路实现

每当要在页面上展示数据时，我们很容易就想到table标签。Table标签使用简单，但是如果想要比较好的结果就比较难。本人也只是写后台居多，前端也只会一些基础，之前写过固定表头的案列，但是觉得还是不怎么好。

思路：

固定表头网上大多数解决办法就是写多个table进行相关的拼接，比如四个table拼接可以上下滚动，左右滚动。这个table越多比较麻烦，而且多个table最大的痛楚就是表格列对比齐，很多不怎么了解table特性的都没有办法。

实现历程：

两个table实现：

1， 我最开始的想法是监听滚动事件，如果滚动条开始滚动，那么就将thead的定位改为绝对定位，将定位的置为放在原有的位置。遗憾的是thead/tr不能进行绝对定位。

2， 我又觉得可以使用相对定位啊，但是thead/tr也不能实现相对定位。

3， 想了一想还是使用两个table吧，将table复制一份，保留table中的thead，将tbody去除（此时去除tbody后如果要保留每一列的宽度，则将table设置为：table-layout:fixed; ）。将复制的table的表头使用绝对定位，就对定位到滚动table的表头处，视觉上就是表头是复制的副本，而看到的tbody是滚动的数据，实现了表头固定，tbody滚动。此滚动没有出现延迟现象。但是还是有一点缺陷就是，滚动条在开始的时候会藏在表头下面的位置，数据较多时，视觉上看不到滑块。有一点遗憾；

4， 解决的话，想通过控制滚动条滑块的最小长度，达到滚动条在数据多的时候也能看得见。

代码截图如下：

css

页面代码

效果图，如果数据较多，那么滚动条很短就会影藏到又上角表头的滚动挑中

一个table实现：

1， 对于强迫症的人，如果需要滚动但是又看不到滚动条，感觉就不爽。我就想能不能使用一个table。一个table就解决了两个table带来的数据列宽度和表头宽度不一致的问题。

2， 还是建立监听事件，当滚动条发生滚动是，将thead 中的th进行相对定位，之前测试过thead和tr都不能脱离table，所以只能th进行相对定位变化的。定位的位置就是滚动条滚动的纵向坐标。也就是说，数据向上移动了50px，那么th就下相对移动50px，显示向来看就是表头固定。

3， 但是遗憾，除了谷歌浏览器的能实现完美贴合，其他的都存在延迟情况，也即是滚动时会出现闪烁现象。

代码截图如下：

一个table页面

css

总结，通过以上连个，如果，用户使用谷歌浏览器的话，用第二种方式还是比较好，没有延迟现象。如果要更广泛多个浏览器使用的话，就只有第一个方法了。

其实如果经常使用table，我们还是可以使用div写一个table控件，div控制更好一些，想怎么显示都可以做到。

如果需要探讨或源代码，请留言交流。