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;
}
运行结果
如果您觉得本文对您有用,欢迎捐赠或留言~
- 本博客所有文章除特别声明外,均可转载和分享,转载请注明出处!
- 本文地址:https://www.leevii.com/?p=975