废话不多说,直接上代码:
html:td部分随便贴
复制代码
name sex age hobby remark 111 female 20 game food 111 female 20 game food 111 female 20 game food 111 female 20 game food 111 female 20 game food 111 female 20 game food 111 female 20 game food 111 female 20 game food 111 female 20 game food 111 female 20 game food 111 female 20 game food 111 female 20 game food 111 female 20 game food 111 female 20 game food 111 female 20 game food 111 female 20 game food 111 female 20 game food 111 female 20 game food 111 female 20 game food 111 female 20 game food 111 female 20 game food 111 female 20 game food 111 female 20 game food 111 female 20 game food 111 female 20 game food 111 female 20 game food 111 female 20 game food 111 female 20 game food 111 female 20 game food 111 female 20 game food
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)`; }) }) }复制代码
最终效果: