原生列表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;
}

           

希望有帮到你们哦