废话不多说，直接上代码：
html：td部分随便贴
<div class="wrapper" id="wrapper">
<table class="table">
<thead class="thead">
<tr>
<th class="th">name</th>
<th class="th">sex</th>
<th class="th">age</th>
<th class="th">hobby</th>
<th class="th">remark</th>
</tr>
</thead>
<tbody>
<tr>
<td>111</td>
<td>female</td>
<td>20</td>
<td>game</td>
<td>food</td>
</tr>
<tr>
<td>111</td>
<td>female</td>
<td>20</td>
<td>game</td>
<td>food</td>
</tr><tr>
<td>111</td>
<td>female</td>
<td>20</td>
<td>game</td>
<td>food</td>
</tr><tr>
<td>111</td>
<td>female</td>
<td>20</td>
<td>game</td>
<td>food</td>
</tr><tr>
<td>111</td>
<td>female</td>
<td>20</td>
<td>game</td>
<td>food</td>
</tr><tr>
<td>111</td>
<td>female</td>
<td>20</td>
<td>game</td>
<td>food</td>
</tr><tr>
<td>111</td>
<td>female</td>
<td>20</td>
<td>game</td>
<td>food</td>
</tr><tr>
<td>111</td>
<td>female</td>
<td>20</td>
<td>game</td>
<td>food</td>
</tr><tr>
<td>111</td>
<td>female</td>
<td>20</td>
<td>game</td>
<td>food</td>
</tr><tr>
<td>111</td>
<td>female</td>
<td>20</td>
<td>game</td>
<td>food</td>
</tr><tr>
<td>111</td>
<td>female</td>
<td>20</td>
<td>game</td>
<td>food</td>
</tr><tr>
<td>111</td>
<td>female</td>
<td>20</td>
<td>game</td>
<td>food</td>
</tr><tr>
<td>111</td>
<td>female</td>
<td>20</td>
<td>game</td>
<td>food</td>
</tr><tr>
<td>111</td>
<td>female</td>
<td>20</td>
<td>game</td>
<td>food</td>
</tr><tr>
<td>111</td>
<td>female</td>
<td>20</td>
<td>game</td>
<td>food</td>
</tr><tr>
<td>111</td>
<td>female</td>
<td>20</td>
<td>game</td>
<td>food</td>
</tr><tr>
<td>111</td>
<td>female</td>
<td>20</td>
<td>game</td>
<td>food</td>
</tr>
<tr>
<td>111</td>
<td>female</td>
<td>20</td>
<td>game</td>
<td>food</td>
</tr>
<tr>
<td>111</td>
<td>female</td>
<td>20</td>
<td>game</td>
<td>food</td>
</tr>
<tr>
<td>111</td>
<td>female</td>
<td>20</td>
<td>game</td>
<td>food</td>
</tr>
<tr>
<td>111</td>
<td>female</td>
<td>20</td>
<td>game</td>
<td>food</td>
</tr>
<tr>
<td>111</td>
<td>female</td>
<td>20</td>
<td>game</td>
<td>food</td>
</tr>
<tr>
<td>111</td>
<td>female</td>
<td>20</td>
<td>game</td>
<td>food</td>
</tr>
<tr>
<td>111</td>
<td>female</td>
<td>20</td>
<td>game</td>
<td>food</td>
</tr>
<tr>
<td>111</td>
<td>female</td>
<td>20</td>
<td>game</td>
<td>food</td>
</tr>
<tr>
<td>111</td>
<td>female</td>
<td>20</td>
<td>game</td>
<td>food</td>
</tr>
<tr>
<td>111</td>
<td>female</td>
<td>20</td>
<td>game</td>
<td>food</td>
</tr>
<tr>
<td>111</td>
<td>female</td>
<td>20</td>
<td>game</td>
<td>food</td>
</tr>
<tr>
<td>111</td>
<td>female</td>
<td>20</td>
<td>game</td>
<td>food</td>
</tr>
<tr>
<td>111</td>
<td>female</td>
<td>20</td>
<td>game</td>
<td>food</td>
</tr>
</tbody>
</table>
</div>
css部分：
.wrapper {
width:600px;
height:400px;
border:1px solid red;
margin:100px auto;
overflow:auto;
}
.table {
width:100%;
border:1px solid #ccc;
border-collapse:collapse;
text-align:center;
overflow:auto;
}
.table thead th {
background-color:#ddd;
line-height:40px;
font-size:20px
}
.table tbody tr td{
height:20px;
line-height:20px;
border-bottom:1px solid #c6c6c6;
white-space: nowrap;
}
js部分：
let scrollTop;
window.onload = function(){
var wrapper = document.getElementById("wrapper");
var th_array = document.getElementsByClassName("th");
wrapper.addEventListener("scroll",function(e){
scrollTop = e.target.scrollTop-1;//为了减少滑动时距离顶部的间隙
th_array = [...th_array];
th_array.forEach(function(ele){
ele.style.transform = `translate(0,${scrollTop}px)`;
ele.style.mozTransform = `translate(0,${scrollTop}px)`;
ele.style.webkitTransform = `translate(0,${scrollTop}px)`;
})
})
}
最终效果：
