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

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

<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>

 爱资料工具-好用的在线工具箱https://www.toolnb.com/2022年最新房贷计算器 - 爱资料工具https://www.toolnb.com/tools/fddb.html