table固定表头滚动内容区flex实现方案

首先是html代码

<div class="site">
    <table class="table">
        <thead>
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>住址</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>上海市浦东新区</td>
        </tr>
        ...此处省略很多个表格行
        </tbody>
    </table>
</div>

需要首先设置父层级site的最大高度，比如为页面的最大高度100vh。然后内部子元素table就可以设置展现方式，并且不会超出这个最大高度。

css代码如下:

* {
    margin: 0;
    padding: 0;
}

.site {
    display: flex;
    height: 100vh;
    flex-direction: column;
}

.table {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.table thead {
    flex: none;
}

.table tbody {
    flex: 1;
    overflow-y: auto;
}

运行结果