完美解决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);}

滚动后的图片：

完美解决html表格表头固定存在的问题相关推荐

css方法实现表格表头固定，横向纵向可滑动
介绍一种用css实现表格表头固定,横向纵向可滑动的方法先用一个div把表格包起来,表格给定高宽,overflow:scroll. 然后给表头写一个黏性布局 position: sticky:top: ...
bootstrap 表格表头固定
效果效果是在pc端和移动端能够使表格的表头固定,并且在顶部,支持缩放时布局不乱. 核心技术利用css的position:fixed 属性来脱离文档流,达到表头固定的效果. 代码说明都在代码里面, ...
html ＜table＞表格表头固定内容滚动代码拿去就能用
纯 html.css代码写的 table 表格先来看下pc端的效果图移动端的效果图,前面两张是静态图,第三张是gif动态图 (像素失真了 •︿• ) 公司的移动端项目,用的是react,页面需求是 ...
elementui 表格表头换行_解决element-ui表格表头内容太长时的换行问题
在用vue+element-ui做一个后台管理系统时,遇到这样的问题, 如图: 使用el-table做一个表格,当表头内容过长时会换行,在不设置的宽度的时候每一列的宽度是等比例分配的,虽然elemen ...
el-table多级表头固定多列
项目场景: 项目要求表格实现多级标题,并且表格滚动条向右滚动时,前四列锁定,效果如图: 问题描述 elementUI给的例子中只有一级标题解决方案: 1:给一级标题添加fixed,实现固定 2.给一 ...
el table 固定表头和首行_el-table表头根据内容自适应，解决表头错位和固定列错位（完美解决）...
将代码复制到指令中即可使用.通过指令方式进行调用.(使用方式 ) 通过计算文字的宽度进行表头设置,其他内容无法计算. 5000个单元格以上根据实际情况使用以上根据实际情况使用,因为单元格越多,计算时间 ...
html表头和内容错位,el-table表头根据内容自适应，解决表头错位和固定列错位（完美解决）...
将代码复制到指令中便可使用.经过指令方式进行调用.(使用方式 ) 经过计算文字的宽度进行表头设置,其余内容没法计算. 5000个单元格以上根据实际状况使用以上根据实际状况使用,由于单元格越多,计算时间 ...
alter table add column多个字段_ElementUI表格el-table表头固定自适应高度解决方案
一.前言 ElementUI.iView都以相同的方式提供了表格组件表头固定的方法,即设置组件的height属性.表头固定很重要,就在于当表格数据项很多时,滚动条出现在表格组件内,而不是出现在表格组件 ...
html css 表头,css固定表格表头(各浏览器通用)
固定表格表头 div{ overflow-y: scroll; overflow-x: hidden; height: 100px; margin-top: 5px; margin-left: 12p ...

完美解决html表格表头固定存在的问题

完美解决html表格表头固定存在的问题

完美解决html表格表头固定存在的问题相关推荐

最新文章

热门文章