页面滚动table头部悬浮

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

      页面滚动头部悬浮,一般都会首相想到监听滚动条离顶部高度然后给需要悬浮的部分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 
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值