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;
}

运行结果

如果您觉得本文对您有用,欢迎捐赠或留言~
微信支付
支付宝

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注