完美解决html表格表头固定存在的问题
当表格数据较多出现滚动条时，很多地方都有固定表头的需求。在网上查找资料，发现了一个比较简洁的方法。
代码如下：
1.css样式：
th{background-color: brown;}table,th,td{border:1px solid gray;padding:2px;text-align: center;}.table_height{height: 160px;overflow:auto ;width: 300px;background-color: whitesmoke;margin: auto;}table{border-spacing: 0;border-collapse: collapse;width: 100%;}
2.html代码：
<body><div class='table_height'><table style=""><thead><tr><th>学号</th><th>姓名</th><th>性别</th><th>年龄</th><th>联系方式</th></tr></thead><tbody><tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>2</td><td>2</td><td>2</td><td>2</td><td>2</td></tr><tr><td>3</td><td>3</td><td>3</td><td>3</td><td>3</td></tr><tr><td>4</td><td>4</td><td>4</td><td>4</td><td>4</td></tr><tr><td>5</td><td>5</td><td>5</td><td>5</td><td>5</td></tr><tr><td>6</td><td>6</td><td>6</td><td>6</td><td>6</td></tr><tr><td>7</td><td>7</td><td>7</td><td>7</td><td>7</td></tr><tr><td>8</td><td>8</td><td>8</td><td>8</td><td>8</td></tr></tbody></table></div></body>
3.js控制表头固定：
window.onload = function(){var tableCont = document.querySelectorAll('.table_height');//console.log(tableCont.length) //多个classfunction scrollHandle (e){//console.log(this);var scrollTop = this.scrollTop;this.querySelector('thead').style.transform = 'translateY(' + scrollTop + 'px)';}//循环多个class执行这个监听(可能出现多个表格)for(var i=0;i<tableCont.length;i++){tableCont[i].addEventListener('scroll',scrollHandle);}}
代码解释：给table外面的div添加监听事件，当table滚动时，记录滚动条滚动的距离，并让表头thead向下移动相应距离。
4.运行结果：
出现的小bug：滚动之后，发现表头的边框消失了，打开控制台可以发现只要滚动了（即translateY存在），表头边框就不显示。
5.解决办法
网上找答案时，有人说在th中加div可以解决。但是，当项目中表格很多时，可能会出问题，所以我没有尝试这个方法，后来试着让th移动，结果居然解决了！！！
直接贴代码：
window.onload = function(){var tableCont = document.querySelectorAll('.table_height');//console.log(tableCont.length) //多个classfunction scrollHandle (e){//console.log(this);var scrollTop = this.scrollTop;var th=this.querySelectorAll('th');for(i=0;i<th.length;i++){th[i].style.transform = 'translateY(' + scrollTop + 'px)';}//this.querySelector('thead').style.transform = 'translateY(' + scrollTop + 'px)';}//循环多个class执行这个监听for(var i=0;i<tableCont.length;i++){tableCont[i].addEventListener('scroll',scrollHandle);}
滚动后的图片：
