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

该文章由 leevare 发布于 ,归类于 HTML/CSS

首先是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;
}

运行结果

如果觉得我的文章对您有用,请您随意打赏。您的支持将鼓励我更加努力创作!

相关文章:

说点什么

avatar
300
  Subscribe  
提醒