今天,同事问我一个问题,怎样实现表格数据很多的时候,用户滚动到下面也可以看到对应表头的交互效果,毕竟如果表头数据不熟悉,滚动到下方会不记得每列数据对应的内容,又滚动上来看表头内容这种体验很不友好,我想到了一个解决方案.
思路:
1.创建两个表格,第一个表格table1没有标题,隐藏; 2.设置table1表格的表头每一个th的宽度为第二个表格的表体的每一个td的宽度; 3.滚动监听,当表格的表头滚过视频顶部,显示table1的表头,否则,隐藏table1的表头; 4.监听页面缩放,页面缩放时重新执行步骤2;
预览效果:
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>y</title>
<style>
* {
padding: 0;
margin: 0;
}
html, body {
width: 100%;
height: 100%;
}
.table {
width: 100%;
/*为表格设置合并边框属性*/
border-collapse: collapse;
}
.table tr th, .table tr td {
margin: 0;
padding: 15px 16px 14px;
box-sizing: border-box;
}
.table thead th {
background: #fafafa;
}
.table tr th {
background: #fafafa;
transition: background .3s ease;
text-align: left;
color: rgba(0, 0, 0, 0.85);
font-weight: 500;
border-bottom: 1px solid #e8e8e8;
}
.table tr td {
border-bottom: 1px solid #e8e8e8;
transition: all .3s;
}
.table>tbody>tr:hover {
background: #e9f5fe;
}
.fixedTableHeader {
width: calc(100% - 40px);
display: none;
position: fixed;
top: 0px;
left: 20px;
overflow: hidden;
margin: 0 auto;
z-index: 999;
transition: all 0.5s ease-in;
}
</style>
</head>
<body>
<div>
<p>ewdfwefgefg</p>
<p>ewdfwefgefg</p>
<p>ewdfwefgefg</p>
<p>ewdfwefgefg</p>
<p>ewdfwefgefg</p>
<p>ewdfwefgefg</p>
<p>ewdfwefgefg</p>
<p>ewdfwefgefg</p>
<p>ewdfwefgefg</p>
<p>ewdfwefgefg</p>
<p>ewdfwefgefg</p>
<p>ewdfwefgefg</p>
<p>ewdfwefgefg</p>
<p>ewdfwefgefg</p>
<p>ewdfwefgefg</p>
<p>ewdfwefgefg</p>
<p>ewdfwefgefg</p>
<p>ewdfwefgefg</p>
<p>ewdfwefgefg</p>
<p>ewdfwefgefg</p>
</div>
<div style="padding: 20px;">
<div id="fixedTableHeader" class="fixedTableHeader">
<table class="table">
<thead>
<tr id="mytr1">
<th>姓名</th>
<th>年龄</th>
<th>籍贯</th>
<th>手机号</th>
<th>居住地址</th>
</tr>
</thead>
</table>
</div>
<div>
<table id="table" class="table">
<thead>
<tr id="mytr2">
<th>姓名</th>
<th>年龄</th>
<th>籍贯</th>
<th>手机号</th>
<th>居住地址</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>12</td>
<td>湖北武汉</td>
<td>13540021458</td>
<td>湖北省武汉市</td>
</tr>
<tr>
<td>张三</td>
<td>12</td>
<td>湖北武汉</td>
<td>13540021458</td>
<td>湖北省武汉市</td>
</tr>
<tr>
<td>张三</td>
<td>12</td>
<td>湖北武汉</td>
<td>13540021458</td>
<td>湖北省武汉市</td>
</tr>
<tr>
<td>张三</td>
<td>12</td>
<td>湖北武汉</td>
<td>13540021458</td>
<td>湖北省武汉市</td>
</tr>
<tr>
<td>张三</td>
<td>12</td>
<td>湖北武汉</td>
<td>13540021458</td>
<td>湖北省武汉市</td>
</tr>
<tr>
<td>张三</td>
<td>12</td>
<td>湖北武汉</td>
<td>13540021458</td>
<td>湖北省武汉市</td>
</tr>
<tr>
<td>张三</td>
<td>12</td>
<td>湖北武汉</td>
<td>13540021458</td>
<td>湖北省武汉市</td>
</tr>
<tr>
<td>张三</td>
<td>12</td>
<td>湖北武汉</td>
<td>13540021458</td>
<td>湖北省武汉市</td>
</tr>
<tr>
<td>张三</td>
<td>12</td>
<td>湖北武汉</td>
<td>13540021458</td>
<td>湖北省武汉市</td>
</tr>
<tr>
<td>张三</td>
<td>12</td>
<td>湖北武汉</td>
<td>13540021458</td>
<td>湖北省武汉市</td>
</tr>
<tr>
<td>张三</td>
<td>12</td>
<td>湖北武汉</td>
<td>13540021458</td>
<td>湖北省武汉市</td>
</tr>
<tr>
<td>张三</td>
<td>12</td>
<td>湖北武汉</td>
<td>13540021458</td>
<td>湖北省武汉市</td>
</tr>
<tr>
<td>张三</td>
<td>12</td>
<td>湖北武汉</td>
<td>13540021458</td>
<td>湖北省武汉市</td>
</tr>
<tr>
<td>张三</td>
<td>12</td>
<td>湖北武汉</td>
<td>13540021458</td>
<td>湖北省武汉市</td>
</tr>
<tr>
<td>张三</td>
<td>12</td>
<td>湖北武汉</td>
<td>13540021458</td>
<td>湖北省武汉市</td>
</tr>
<tr>
<td>张三</td>
<td>12</td>
<td>湖北武汉</td>
<td>13540021458</td>
<td>湖北省武汉市</td>
</tr>
<tr>
<td>张三</td>
<td>12</td>
<td>湖北武汉</td>
<td>13540021458</td>
<td>湖北省武汉市</td>
</tr>
<tr>
<td>张三</td>
<td>12</td>
<td>湖北武汉</td>
<td>13540021458</td>
<td>湖北省武汉市</td>
</tr>
<tr>
<td>张三</td>
<td>12</td>
<td>湖北武汉</td>
<td>13540021458</td>
<td>湖北省武汉市</td>
</tr>
<tr>
<td>张三</td>
<td>12</td>
<td>湖北武汉</td>
<td>13540021458</td>
<td>湖北省武汉市</td>
</tr>
<tr>
<td>张三</td>
<td>12</td>
<td>湖北武汉</td>
<td>13540021458</td>
<td>湖北省武汉市</td>
</tr>
<tr>
<td>张三</td>
<td>12</td>
<td>湖北武汉</td>
<td>13540021458</td>
<td>湖北省武汉市</td>
</tr>
<tr>
<td>张三</td>
<td>12</td>
<td>湖北武汉</td>
<td>13540021458</td>
<td>湖北省武汉市</td>
</tr>
<tr>
<td>张三</td>
<td>12</td>
<td>湖北武汉</td>
<td>13540021458</td>
<td>湖北省武汉市</td>
</tr>
<tr>
<td>张三</td>
<td>12</td>
<td>湖北武汉</td>
<td>13540021458</td>
<td>湖北省武汉市</td>
</tr>
<tr>
<td>张三</td>
<td>12</td>
<td>湖北武汉</td>
<td>13540021458</td>
<td>湖北省武汉市</td>
</tr>
<tr>
<td>张三</td>
<td>12</td>
<td>湖北武汉</td>
<td>13540021458</td>
<td>湖北省武汉市</td>
</tr>
<tr>
<td>张三</td>
<td>12</td>
<td>湖北武汉</td>
<td>13540021458</td>
<td>湖北省武汉市</td>
</tr>
<tr>
<td>张三</td>
<td>12</td>
<td>湖北武汉</td>
<td>13540021458</td>
<td>湖北省武汉市</td>
</tr>
<tr>
<td>张三</td>
<td>12</td>
<td>湖北武汉</td>
<td>13540021458</td>
<td>湖北省武汉市</td>
</tr>
<tr>
<td>张三</td>
<td>12</td>
<td>湖北武汉</td>
<td>13540021458</td>
<td>湖北省武汉市</td>
</tr>
<tr>
<td>张三</td>
<td>12</td>
<td>湖北武汉</td>
<td>13540021458</td>
<td>湖北省武汉市</td>
</tr>
<tr>
<td>张三</td>
<td>12</td>
<td>湖北武汉</td>
<td>13540021458</td>
<td>湖北省武汉市</td>
</tr>
<tr>
<td>张三</td>
<td>12</td>
<td>湖北武汉</td>
<td>13540021458</td>
<td>湖北省武汉市</td>
</tr>
<tr>
<td>张三</td>
<td>12</td>
<td>湖北武汉</td>
<td>13540021458</td>
<td>湖北省武汉市</td>
</tr>
<tr>
<td>张三</td>
<td>12</td>
<td>湖北武汉</td>
<td>13540021458</td>
<td>湖北省武汉市</td>
</tr>
<tr>
<td>张三</td>
<td>12</td>
<td>湖北武汉</td>
<td>13540021458</td>
<td>湖北省武汉市</td>
</tr>
<tr>
<td>张三</td>
<td>12</td>
<td>湖北武汉</td>
<td>13540021458</td>
<td>湖北省武汉市</td>
</tr>
<tr>
<td>张三</td>
<td>12</td>
<td>湖北武汉</td>
<td>13540021458</td>
<td>湖北省武汉市</td>
</tr>
<tr>
<td>张三</td>
<td>12</td>
<td>湖北武汉</td>
<td>13540021458</td>
<td>湖北省武汉市</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
<script type="text/javascript">
const mytr1Child = document.getElementById('mytr1').children;
const mytr2Child = document.getElementById('mytr2').children;
const table = document.getElementById('table');
const fixedTableHeader = document.getElementById('fixedTableHeader')
// 设置隐藏表头每一列的宽度和实际表头每一列的宽度保持一致
function setWidth() {
for(let i = 0; i < mytr1Child.length; i++) {
mytr1Child[i].style.width = mytr2Child[i].offsetWidth + 'px';
}
}
setWidth();
window.resize = function() {
setWidth();
}
document.addEventListener('scroll', () => {
if(document.documentElement.scrollTop > table.offsetTop) {
fixedTableHeader.style.display = 'block';
} else {
fixedTableHeader.style.display = 'none';
}
});
</script>
</html>
复制代码结语
这个代码放在vue中可直接使用,切记setWidth这个函数需要访问dom结构,调用周期应在mouted之后,这个方案不一定是最优的,非常欢迎有更好想法的小伙伴联系我交流分享.(qq: 2510909248),一起进步~