,,

原生table表頭固定標題垂直滾動

當前位置：點晴教程→知識管理交流 →『技術文檔交流』

freeflydom

2023年8月29日 11:28 本文熱度 1131

需求場景

前后端不分離項目中的表格，想實現表格垂直方向滾動時只有表體滾動，表頭一直固定在頭部，橫向滾動時表頭和表體均橫向滾動，同時整個表格以及內部元素寬度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協同辦公管理系統。

公交车上荫蒂添的好舒服的电影-公用玩物(np双xing总受)-公用小荡货芊芊-公与妇仑乱hd-攻把受做哭边走边肉楼梯play-古装一级淫片a免费播放口

原生table表頭固定標題垂直滾動

需求場景

最終實現效果

解決思路