利用css3 translate完美实现表头固定效果
这篇文章主要介绍了利用css3 translate完美实现表头固定效果的相关资料,文中通过示例代码介绍的很详细,相信对大家具有一定的参考价值,需要的朋友们下面来一起看看吧。
前言
前段时间在工作中正好需要这个功能,但是找了很多都不能完美的实现,所以在此就自己做了一个固定表头的方法,主要用到了css3中的translate和一小段js代码,下面来一起看看吧。
效果如下:

感觉是不是很和谐,而且代码也少,不足的是IE9以下不支持translate属性,但现在也没多少要考滤IE9以下的兼容了吧,做前端老兼顾低版本的浏览器难免会让自己束手束脚。。。。
下面来看下代码吧
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
CSS样式
JS脚本
总结
好了,以上就是这篇文章的全部内容了,代码是不是真的很少呢,还在等什么?快点感受一下吧。希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。