[前端][CSS] 纯css实现纵向滚动固定表头与横向内容滚动

Posted 2023-04-19

参考技术A 这次要实现的目标是类似这种，纵向滚动时表头固定，横向滚动时，表头跟着滚动

最基础的思路就是表头和内容是用两个表格来显示（图来自 https://zhuanlan.zhihu.com/p/33280304 ），关于怎么保存表头和内容列宽一致链接里这个文章里也有写就不另外说了。

纵向滚动是挺好实现的，我开始是在内容的表格外面套了一个div，之后设置 overflow-y:auto 就实现纵向滚动了。
但横向滚动呢？
首先想到的方案是在最外面的div,outer加上 overflow-x:auto

虽然这样横纵都能滚动了，但是横向滚动的时候纵向滚动条也被滚走了。

然后想到了是用js来同步，可以是可以的，但是还是想挣扎一下。

之后想到了fixed，发现如果表头设置为fixed无论横向滚动还是都会被固定在原地。
最后突然想到一个position的新属性，sticky
设置了 position: sticky ，在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是top、left等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果（ https://www.cnblogs.com/s1nker/p/4835079.html ）。

所以最后设置了表头

css:

就成功实现了想要的效果了。

不过sticky的兼容性也是要考虑一下的。

前端固定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>