对于行数超长,一个页面都放不下的表格,使得表头固定,表格内容能滚动的效果是必须要的,那么怎么实现呢?

百度了好几个方法,有说分两个表格来实现的,有用了比较复杂的css的,都没能成功地实现这个效果,最后参考网上一些方法,再结合本身所需改动,得出以下html和css,成功实现所需效果,特此记下备忘。

html部分:

<div class="flows">
	<table class="layui-table" lay-filter="param">
		<thead>
			<tr>
				<th>参数名称</th>
				<th>参数关键字</th>
				<th>默认值</th>
				<th>参数类型</th>
				<th style="width:17px;"></th> 
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>参数名称</td>
				<td>参数名称</td>
				<td>参数名称</td>
				<td>参数名称</td>
			</tr>
		</tbody>
	</table>
</div>

css部分:

.flows table {	border: 1px solid #CCCCCC}
.flows table thead,
.flows tbody tr {
			display: table;
			width: calc( 100% - 1px);
			table-layout: fixed;
		}
.flows tbody {
			display: block;
			overflow-y: scroll;
			height: 150px;
		}
.layui-table th,
.layui-table td {
			padding: 9px 0px;
			text-align: center;
		}