css3 固定,利用css3 translate完美实现表头固定效果

前言

前段时间在工作中正好需要这个功能，但是找了很多都不能完美的实现，所以在此就自己做了一个固定表头的方法，主要用到了css3中的translate和一小段js代码，下面来一起看看吧。

效果如下：

感觉是不是很和谐，而且代码也少，不足的是IE9以下不支持translate属性，但现在也没多少要考滤IE9以下的兼容了吧，做前端老兼顾低版本的浏览器难免会让自己束手束脚。。。。

下面来看下代码吧

HTML

123456789101112131415

var tr = '';

for(var i=0; i<15; i++) {

tr += '

\'+i+'\'+i+'\'+i+'\'+i+'\'+i+'\'+i+'\'+i+'\'+i+'\'+i+'\'+i+'\'+i+'\'+i+'\'+i+'\'+i+'\'+i+'\';

}

document.write(tr);

CSS样式

*{ margin: 0; padding: 0; list-style: none;}

.box {

width: 300px;

height: 300px;

margin: 50px auto 0;

overflow: auto;

}

.box table{

width: 100%;

border-collapse: collapse;

border-right: 1px solid #ccc;

border-top: 1px solid #ccc;

text-align: center;

}

.box table thead {

background-color: #ccc;

}

.box table th,

.box table td {

padding: 8px 10px;

border-left: 1px solid #ccc;

border-bottom: 1px solid #ccc;

white-space: nowrap;

}

JS脚本

window.onload = function() {

var $ = document.querySelector.bind(document);

var boxEle = $('.box');

boxEle.addEventListener('scroll', function(e) {

this.querySelector('thead').style.transform = 'translate(0, '+this.scrollTop+'px)';

});

}

总结

好了，以上就是这篇文章的全部内容了，代码是不是真的很少呢，还在等什么？快点感受一下吧。希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。