原生清單table固定表頭

将

table

的

thead

和

tbody

拆分成兩個表格，用 div 包起來，給 div 設定固定高度和

overflow: auto;

屬性（其實隻給

tbody

的

table

包上

div

就可以）。

<table class="bordered tTable">
            <thead>
                <tr>
                    <td>
                        1
                    </td>
                    <td>
                        2
                    </td>
                    <td>
                        3
                    </td>
                </tr>
            </thead>
        </table>
        <div class="table-box">
            <table class="bordered tTable">
                <tbody>
                    <tr>
                        <td>11111</td>
                    </tr>
                </tbody>
            </table>
        </div>
           

要給 table 添加一個 table-layout: fixed; 屬性：使列寬由表格寬度和列寬度設定

具體的樣式需要你們自己去調整

.tTable {
    table-layout: fixed;
}

.table-box {
    overflow: auto;
    height: calc(100% - 60px);
    box-sizing: border-box;
}
//也可以給表頭的table添加(因為部落客當時寫的環境不需要添加這個屬性,是以這個定位得看需求)
table{
    position: fixed;
}

           

希望有幫到你們哦