首先是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;
}
运行结果
如果觉得我的文章对您有用，请您随意打赏。您的支持将鼓励我更加努力创作！
如无特殊声明，文章均为原创，若有不正之处，万望告知。转载请附上原文地址，十分感谢！
