原生table表头固定标题垂直滚动

当前位置：点晴教程→知识管理交流 →『技术文档交流』

freeflydom

2023年8月29日 11:28 本文热度 524

需求场景

前后端不分离项目中的表格，想实现表格垂直方向滚动时只有表体滚动，表头一直固定在头部，横向滚动时表头和表体均横向滚动，同时整个表格以及内部元素宽度100%，占满空间

最终实现效果

宽度大于父元素宽度(宽度100%)
宽度小于父元素宽度

解决思路

1. 通过粘性布局`position: sticky;`实现表头固定
2. 给祖先级别元素设置滚动
    - 给table设置垂直滚动宽度`width:100%`，结果会发现表格内部不能够撑开100%，设置`height:200px;overflow-y: auto;`能实现垂直方向上的滚动
    - 此时建议给table外部增加一个父元素，给其设置`overflow-y: auto;width:100%;height:200px;`完美解决

代码参考：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原生Table滚动优化</title>
    <style>
        .table-box {
            height: 200px;
            display: block;
            overflow-y: auto;
            border: 1px solid red;

        }
        .scroll-table{
            width: 100%;
            overflow-x: auto;
            text-align: center;
        }
        .scroll-table thead{
            position: sticky;
            top: 0;
            z-index: 3;
            line-height: 30px;
            background-color: #ddd;
        }
        .scroll-table th,.scroll-table td{
            min-width: 110px;
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div class="table-box">
        <table class="scroll-table">
            <thead>
                <tr>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>

    <script>
        const allTables = document.queryselectorAll("table");
        let theadHtml = '', hbodyHtml='', tbodyTr = ''
        for(let i = 0;i<15;i++){
            theadHtml+=`<th>表头th-${i}</th>`
            hbodyHtml+=`<td>表头td-${i}</td>`
        }
        for(let i = 0;i<25;i++){
            tbodyTr+= `<tr>${hbodyHtml}</tr>`   
        }
        document.queryselector('thead tr').innerHTML = theadHtml
        document.queryselector('tbody').innerHTML = tbodyTr
    </script>
</body>

</html>

运行效果：

查看原文

该文章在 2023/8/29 14:21:14 编辑过

关键字查询

固定

标题

滚动

正在查询...

点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。

点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理，结合码头的业务特点，围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体，是物流码头及其他港口类企业的高效ERP管理信息系统。

点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。

点晴免费OA是一款软件和通用服务都免费，不限功能、不限时间、不限用户的免费OA协同办公管理系统。