【css常用布局】表头固定的可纵向滚动的表格布局（小白向）

说明

纵向滚动表格的时候，表头固定

效果展示

实现原理

html部分

<div class="container">
	<div class="table_wrap">
		<table class="table">
			<thead>
				<tr>
					<th class="table_th">我是标题一</th>
					<th class="table_th">我是标题二</th>
					<th class="table_th">我是标题三</th>
				</tr>
			</thead>
			<tbody>
				<tr class="table_tr">
					<td class="table_td">万事开头难</td>
					<td class="table_td">然后中间难</td>
					<td class="table_td">最后结尾难</td>
				</tr>
				
				... 中间就省略了
				
				<tr class="table_tr">
					<td class="table_td">万事开头难</td>
					<td class="table_td">然后中间难</td>
					<td class="table_td">最后结尾难</td>
				</tr>
			</tbody>
		</table>
	</div>
</div>

css部分

.container { // 内容居中
    display: flex;
	align-items: center;
	flex-direction: column;
	font-size: 12px;
}

.table_wrap {
	border: 1px solid rgba(0, 0, 0, 0.3);
	height: 400px;
	overflow: auto;
	width: 60%;
}

.table {
	border-collapse: collapse; // 表格边框合并
	width: 100%;
}

.table_th {
	background-color: rgb(221, 221, 221);
	padding: 16px;
	position: sticky; // 表格头靠这个属性固定
	top: 0px;
	z-index: 9999;
}

.table_tr {
	border-top: 1px solid rgba(0, 0, 0, 0.3);
}

.table_td {
	padding: 16px;
}

简单吧，给个赞再走吧！