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

系统 3614 0

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

 

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

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

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

 

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

 

为什么不使用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/

 

 

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


更多文章、技术交流、商务合作、联系博主

微信扫码或搜索:z360901061

微信扫一扫加我为好友

QQ号联系: 360901061

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请用微信扫描下面二维码支持博主2元、5元、10元、20元等您想捐的金额吧,狠狠点击下面给点支持吧,站长非常感激您!手机微信长按不能支付解决办法:请将微信支付二维码保存到相册,切换到微信,然后点击微信右上角扫一扫功能,选择支付二维码完成支付。

【本文对您有帮助就好】

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请用微信扫描上面二维码支持博主2元、5元、10元、自定义金额等您想捐的金额吧,站长会非常 感谢您的哦!!!

发表我的评论
最新评论 总共0条评论