Html实现Excel锁定表头效果

zhou472845337

已于 2022-03-24 16:22:37 修改

阅读量562

点赞数

分类专栏： Html Excel锁定文章标签：前端

于 2022-03-24 11:38:00 首次发布

本文链接：https://blog.youkuaiyun.com/zhou472845337/article/details/123706909

版权

Html 同时被 2 个专栏收录

1 篇文章

订阅专栏

Excel锁定

1 篇文章

订阅专栏

本文详细介绍了如何通过HTML和JavaScript实现区域划分，包括共锁区、行锁区、列锁区和内容区的布局，并解决滚动条对齐问题。通过CSS和JS代码，确保表格在不同锁定区域的宽度限制和滚动同步。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.区域划分，列锁定区，行锁定区

2.需要分四个Table，每个区对应一个table

共锁区和行锁区放在一个div并浮动,行锁定区指定最大宽度

列锁区和内容区是在一个div中，并浮动，列区指定最大高度，内容区指定最大宽度和最大高度，用于产生滚动条

这两个div中最好是中间夹着隔行div,比如使用bootstrap的class

<div class="clearfix"></div>

3.Html代码

a.先给到table指定的高和宽

table thead th, table thead tr {
    line-height: 12px;
    width: 80px;
}
table tbody tr {
    line-height: 12px;
    width: 80px;
}

所有的四个table所属的div，放在一个总div中，div的宽度为共锁区和行锁区的宽度之和（列锁区和内容锁区宽度之和）

<div style="width:1200px;">
    <!-- 所有区内容 -->
</div>

b.共锁区和行锁区 div

其中style中table-layout:fixed;作用为将table行中宽高为指定的宽高

    <!-- 共锁区div -->
    <div style="float:left;width:200px;" >
        <table style="table-layout: fixed;">
            <!--共锁区内容 -->
        </table>
    </div>
    <!-- 行锁区div -->
    <div id="top-topic" style="width:1200px;overflow-x:hidden;float: right;">
        <table style="table-layout: fixed;">
            <!-- 行锁区 -->
        </table>
    </div>

c.列锁区和内容锁区div

<!-- 列div -->
<div id="left-topic" style="width:200px;max-height:600px;overflow-y:hidden;float: left;">
    <table style="table-layout: fixed;">
        <!-- 列锁区内容 -->
    </table>
</div>
<!-- 内容div -->
<div id="detail_content" style="float:right;overflow: scroll;width:1200px;max-height:600px;">
    <table style="table-layout: fixed;">
        <!-- 内容锁区 -->
    </table>
</div>

d.整合后html

<div style="width:1200px;">
        <!-- 共锁区div -->
    <div style="float:left;width:200px;" >
        <table style="table-layout: fixed;">
            <!--共锁区内容 -->
        </table>
    </div>
    <!-- 行锁区div -->
    <div id="top-topic" style="width:1000px;overflow-x:hidden;float: right;">
        <table style="table-layout: fixed;">
            <!-- 行锁区内容 -->
        </table>
    </div>
    <div class="clearfix"></div>
    <!-- 列div -->
    <div id="left-topic" style="width:200px;max-height:600px;overflow-y:hidden;float: left;">
        <table style="table-layout: fixed;">
            <!-- 列锁区内容 -->
        </table>
    </div>
    <!-- 内容div -->
    <div id="detail_content" style="float:right;overflow: scroll;width:1000px;max-height:600px;">
        <table style="table-layout: fixed;">
            <!-- 内容锁区 -->
        </table>
    </div>
</div>

e.JS代码

$(function(){
    $("detail_content").scroll(function(){
        let scrollLeft = $("#detail_content").scrollLeft();
        let scrollTop = $("#detail_content").scrollTop()
        $("#top-topic").scrollLeft(scrollLeft);
        $("#left-topic").scrollTop(scrollTop);
    });
});

效果demo

TableLock

4.欠缺及升级版代码

滚动条拉到最下或最右，会有对不齐，因为存在了滚动条后，其实行锁区和内容锁区的内容宽度已经不一样了，那如何补呢，那么内容区也不能放滚动条，将滚动条置为隐藏，使用一个div做为滚动条控件

上代码,HTML部分,宽度增加一个滚动条宽度，float 全部为left

<!-- 宽度加一个滚动条的宽度  -->
<div style="width:1215px;">
        <!-- 共锁区div -->
    <div style="float:left;width:200px;" >
        <table style="table-layout: fixed;">
            <!--共锁区内容 -->
        </table>
    </div>
    <!-- 行锁区div -->
    <div id="top-topic" style="width:1000px;overflow-x:hidden;float: left;">
        <table style="table-layout: fixed;">
              <!-- 行锁区内容 -->
        </table>
    </div>
    <!-- 格式清除 --><div class="clearfix"></div>
    <!-- 列div -->
    <div id="left-topic" style="width:200px;max-height:600px;overflow-y:hidden;float: left;">
        <table style="table-layout: fixed;">
              <!-- 列锁区内容 -->
        </table>
    </div>
        <!-- 内容div -->
    <div id="detail_content" style="float:left;overflow: hidden;width:1000px;max-height:600px;">
        <table style="table-layout: fixed;">
              <!-- 内容锁区 -->
        </table>
    </div>
    <!-- 垂直滚动条div -->
    <div id="vertical_scroll_div" style="float:left;overflow: scroll;width:15px;max-height:600px;">
        <div id="table_height" style="width: 15px;"></div>
    </div>
    <!-- 格式清除 --><div class="clearfix"></div>
    <!-- div占用 -->
    <div style="height:15px;width: 200px;overflow-y: hidden;float: left;"></div>
    <!-- 水平滚动条div -->
    <div id="horizontal_scroll_div" style="float:left;overflow: scroll;width:1200px;height:15px;">
        <div id="table_width" style="height: 15px;"></div>
    </div>
</div>

$(function(){
    $("#table_height").height($("#detail_content>table").height());
    $("#table_width").width($("#detail_content>table").width());


    $("#vertical_scroll_div").scroll(function () {
        scroll('vertical');
    });
    $("#horizontal_scroll_div").scroll(function () {
        scroll('horizontal');
    });
});


function scroll(type) {
    if ('vertical' === type) {
        // 垂直滚动
        let scrollTop = $("#vertical_scroll_div").scrollTop()
        $("#left-topic").scrollTop(scrollTop);
        $("#content_div").scrollTop(scrollTop);
    } else if ('horizontal' === type) {
        // 水平滚动
        let scrollLeft = $("#horizontal_scroll_div").scrollLeft()
        $("#top-topic").scrollLeft(scrollLeft);
        $("#content_div").scrollLeft(scrollLeft);
    }
}