js实现table 表头顶部固定方法

最新推荐文章于 2026-05-19 07:36:23 发布

原创最新推荐文章于 2026-05-19 07:36:23 发布 · 2k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

开发日常

当前文章被收录于：

开发日常

43 篇文章 1 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

这篇博客介绍了如何使用HTML和CSS实现一个顶部固定表头的布局，特别是在数据表格内容过多需要滚动时，保持表头始终可见。示例代码中，通过设置`margin-bottom`负值和`overflow:auto`属性，实现了表头与内容区域的分离并保证了表头的固定显示。JavaScript部分用于同步表头和内容列的宽度，确保布局的一致性。

业务需求需要顶部固定表头方式实现。

<div>
    <div class="table-head" style="margin-bottom: -20px;">
        <table class="table table-striped">
            <thead>
            <th>期数</th>
            <th>时间</th>
            <th>本月还款</th>
            <th>本月本金</th>
            <th>本月利息</th>
            <th>已还本金总额</th>
            <th>已还利息总额</th>
            <th>累计还款</th>
            </thead>
        </table>
    </div>
    <div class="table-body" style="overflow:auto;height: 300px;">
        <table class="table table-striped">
            <tbody id="result">
            </tbody>
        </table>
    </div>
</div>
<script>
$('.table-head table th').each(function (k, v) {
    let width = $(v).width();
    $('.table-body table tr').each(function (key, val) {
        $($(val).find('td')[k]).width(width);
    });
});
</script>