js+css实现表格表头固定
html结构（重点结构）css（重点）js效果图
html结构（重点结构）
<div class="tbwrap">
<table id="mttable" class="mui-table-view mttable">
<thead>
...
</thead>
<tbody>
...
</tbody>
</table >
</div>
css（重点）
.tbwrap{
height: calc(100% - 210px);/*高度按自己需要写*/
overflow-y: auto;
}
js
就是给滚动的div绑定滚动事件滚动时表格的头部跟随移动，关键css样式transform:translateY()
$(".tbwrap").each(function(){
this.addEventListener('scroll',scrollHandle
);
})
function scrollHandle (e
){
var scrollTop
= this.scrollTop
;
this.querySelector('thead').style
.transform
= 'translateY(' + scrollTop
+ 'px)';
}
效果图
