前端固定table表头方法之css和js结合实现
由于我的页面比较复杂就不贴完整代码了,这里就讲大概思路
先设置css
/** 隐藏滚动条 */ ::-webkit-scrollbar { width: 8px; background-color: transparent; } table tbody { display: block; width: calc(100% + 8px); /*这里的8px是滚动条的宽度*/ /*height: 600px;*/ height: auto; overflow-y: scroll; -webkit-overflow-scrolling: touch; } table thead { transform: translateY(0px); background: #fff; z-index: 999; } table thead tr, table tbody tr { box-sizing: border-box; table-layout: fixed; display: table; width: 100%; border-bottom: none; }
js部分:
// 固定表头 $(document).scroll(function() { var scroH = $(document).scrollTop(); //滚动高度 if(scroH > 170){ //距离顶部的高度(根据自己实际情况来定):也就是需要固定的地方在滚动到多大距离固定 var h = scroH - 170 $("thead").css("transform", ‘translateY(‘+ h+‘px)‘) } else { $("thead").css("transform", ‘translateY(0)‘) } });
html大概的结构是:
<table> <thead> <tr></tr> </thead> <tbody> <tr></tr> </tbody> </table>
相关推荐
世樹 2020-11-11
SCNUHB 2020-11-10
bleach00 2020-11-10
FellowYourHeart 2020-10-05
momode 2020-09-11
思君夜未眠 2020-09-04
jessieHJ 2020-08-19
行吟阁 2020-08-09
表格的现在还是较为常用的一种标签,但不是用来布局,常见处理、显示表格式数据。在HTML网页中,要想创建表格,就需要使用表格相关的标签。<table> <tr> <td>单元格内的文字</td> ...
gufudhn 2020-08-09
末点 2020-08-03
nimeijian 2020-07-30
好记忆也需烂 2020-07-28
zlsdmx 2020-07-05
tomson 2020-07-05
tianqi 2020-07-05
onlykg 2020-07-04