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