页面滚动table头部悬浮

最新推荐文章于 2021-12-17 17:37:46 发布

原创

最新推荐文章于 2021-12-17 17:37:46 发布 · 2.8k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#滚动悬浮 #table悬浮

页面滚动时实现table头部悬浮，但使用fixed定位会导致thead宽度错乱。解决方案是创建一个独立的thead，滚动时显示，通过js调整悬浮thead的列宽，使其与原始table匹配。代码示例包括css、html和调整宽度的js部分。

页面滚动头部悬浮，一般都会首相想到监听滚动条离顶部高度然后给需要悬浮的部分position设置成fixed，在一般布局里面是可以的，不过在table布局里面，如果要fixed悬浮thead里面的th会发现宽度样式都乱了。只能想其他办法了，可以先写一个div里面放正常需要的table，然后滚动页面后再显示出一个可以随屏幕滚动的新的thead，如图所示，圈起来的代表需要悬浮的thead：

滚动悬浮的效果如图：

话不多说直接上代码。

css代码如下：

<style type="text/css">
    #scroll_head {
        position: absolute;
        display: none;
    }
</style>

html代码如下：

<table class="order ncu-table-style">
    <thead>
        <tr>
            <th class="w10"></th>
            <th class="w100"></th>
            <th clas