js+css实现表格表头固定

最新推荐文章于 2024-08-13 08:09:12 发布

微笑的鱼_

最新推荐文章于 2024-08-13 08:09:12 发布

阅读量592

点赞数

文章标签： javascript css

本文链接：https://blog.csdn.net/qq_30907845/article/details/107107871

版权

js+css实现表格表头固定

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)';
    }