JQuery实现的Table表头固定展示效果

 

• 在线演示1
• 在线演示2
• 在线演示3
• 本地下载

大家可能经常需要展示数据或者报表，表头如果滚动上去后，查看数据的类别和字段是个麻烦事情，在这里我们推荐来自tympanus的一个JS实现的 table表头固定效果，相信大家肯定会受益的，这个demo使用了jQuery来实现，所以能够很好的支持各种浏览器上的报表展示！

 

这里有两点值得大家讨论：

 

为什么不使用position:fixed来实现表头固定

使用fixed的好处在于：

• 无需计算滚动中的偏移，而使用JS需要自己处理
• 没有滚动响应的延迟，效果可能更好

但是fixed有一个非常重要的缺点：

如果你的table宽度超出了容器，那么水平的overflow需要设置，但是这个时候，你会发现fixed的表头不会再滚动了，应为它已经脱离了文档的布局，这就是为什么有这么多的开源的表头固定处理JS

 

转载：http://www.gbtags.com/gb/share/2712.htm

原文：http://tympanus.net/codrops/2014/01/09/sticky-table-headers-columns/