css 实现table表头固定，内容进行滚动（两种方式）

最新推荐文章于 2025-03-18 14:58:48 发布

让心在跳动

最新推荐文章于 2025-03-18 14:58:48 发布

阅读量1.1w

点赞数 4

文章标签： css css3 html web

本文链接：https://blog.csdn.net/weixin_44301166/article/details/106695509

版权

本文介绍两种使用CSS实现表格固定表头的方法，一种是直接利用CSS属性，另一种是通过两个div包裹table来实现。文章详细展示了代码示例，包括如何设置宽度、高度、背景颜色等样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先要明确功能需求：

固定表头
table垂直滚动条
table列宽自适应

第一种方式：纯css

<!DOCTYPE html>
<!-- 不加此标签，IE不生效 -->
<html>
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<title>表头锁定</title>
	</head>
	<style>
		.myTable tbody {
			display: block; // 进行转换为块级元素
			height: 250px;
			width: 900px;
			overflow: auto;
			text-align: center;
		}

		.myTable thead,
		tbody tr {
			display: table;
			width: 900px;
			table-layout: fixed;
		}

		.myTable thead {
			background: #E4E8F3;
			color: black;
		}

		.myTable thead tr th {
			text-align: center;
		}
	</style>
	<body>
		<div id="div_1" style="padding: 1px 15px 15px 15px;margin-top: 50px; ">
			<table class="myTable" id="nav_tab" border="1">
				<thead>
					<tr>
						<th>头字段1</th>
						<th>头字段2</th>
						<th>头字段3</th>
						<th>头字段4</th>
						<th>头字段5</th>
				</thead>
				<tbody id="nav_tab_tbd">
					<tr>
						<td>99999</td>
						<td>99999</td>
						<td>99999</td>
						<td>99999</td>
						<td>99999</td>
					</tr>
					<tr>
						<td>99999</td>
						<td>99999</td>
						<td>99999</td>
						<td>99999</td>
						<td>99999</td>
					</tr>
					<tr>
						<td>99999</td>
						<td>99999</td>
						<td>99999</td>
						<td>99999</td>
						<td>99999</td>
					</tr>
					<tr>
						<td>99999</td>
						<td>99999</td>
						<td>99999</td>
						<td>99999</td>
						<td>99999</td>
					</tr>
					<tr>
						<td>99999</td>
						<td>99999</td>
						<td>99999</td>
						<td>99999</td>
						<td>99999</td>
					</tr>
					<tr>
						<td>99999</td>
						<td>99999</td>
						<td>99999</td>
						<td>99999</td>
						<td>99999</td>
					</tr>
					<tr>
						<td>99999</td>
						<td>99999</td>
						<td>99999</td>
						<td>99999</td>
						<td>99999</td>
					</tr>
					<tr>
						<td>88888</td>
						<td>88888</td>
						<td>88888</td>
						<td>88888</td>
						<td>88888</td>
					</tr>
					<tr>
						<td>99999</td>
						<td>99999</td>
						<td>99999</td>
						<td>99999</td>
						<td>99999</td>
					</tr>
					<tr>
						<td>99999</td>
						<td>99999</td>
						<td>99999</td>
						<td>99999</td>
						<td>99999</td>
					</tr>
					<tr>
						<td>99999</td>
						<td>99999</td>
						<td>99999</td>
						<td>99999</td>
						<td>99999</td>
					</tr>
					<tr>
						<td>99999</td>
						<td>99999</td>
						<td>99999</td>
						<td>99999</td>
						<td>99999</td>
					</tr>
					<tr>
						<td>22222</td>
						<td>22222</td>
						<td>22222</td>
						<td>22222</td>
						<td>22222</td>
					</tr>
					<tr>
						<td>22222</td>
						<td>22222</td>
						<td>22222</td>
						<td>22222</td>
						<td>22222</td>
					</tr>
				</tbody>

			</table>
		</div>
	</body>
</html>

第二种方式：使用连个div分别包裹table表格来实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}

			th {
				border: 1px solid #e6e6e6;
				line-height: 5vh;
				color: #666666;
				font-size: 16px;
			}

			table {
				border-collapse: collapse;
				width: 100%;
			}

			td {
				padding: 5px;
				border: 1px solid #e6e6e6;
				font-size: 14px;
			}

			.table-head {
				padding-right: 17px;
				background-color: rgb(207, 231, 179);
				color: #000;
				height: 5vh;
			}

			.table-body {
				width: 100%;
				max-height: 200px;
				overflow: auto;
			}

			.table-head table,
			.table-body table {
				width: 100%;
			}

			.table-body table tr:nth-child(2n+1) {
				background-color: #f2f2f2;
			}

			.table-body table tr:hover {
				background-color: rgb(240, 249, 228);
				transition: .2s;
			}
		</style>
	</head>
	<body>
		<div class="wrapbox">
			<div class="table-head">
				<table>
					<thead>
						<th width="10%">头字段1</th>
						<th width="30%">头字段2</th>
						<th width="20%">头字段3</th>
						<th width="10%">头字段4</th>
						<th width="30%">头字段5</th>
					</thead>
				</table>
			</div>
			<div class="table-body">
				<table>
					<tbody id="tbody">
						<tr>
							<td>1</td>
							<td>1</td>
							<td>1</td>
							<td>1</td>
							<td>1</td>
						</tr>
						<tr>
							<td>2</td>
							<td>1</td>
							<td>1</td>
							<td>1</td>
							<td>1</td>
						</tr>
						<tr>
							<td>3</td>
							<td>4</td>
							<td>1</td>
							<td>1</td>
							<td>1</td>
						</tr>
						<tr>
							<td>4</td>
							<td>1</td>
							<td>1</td>
							<td>1</td>
							<td>1</td>
						</tr>
						<tr>
							<td>5</td>
							<td>1</td>
							<td>1</td>
							<td>1</td>
							<td>1</td>
						</tr>

						<tr>
							<td>5</td>
							<td>1</td>
							<td>1</td>
							<td>1</td>
							<td>1</td>
						</tr>
						<tr>
							<td>5</td>
							<td>1</td>
							<td>1</td>
							<td>1</td>
							<td>1</td>
						</tr>
						<tr>
							<td>5</td>
							<td>1</td>
							<td>1</td>
							<td>1</td>
							<td>1</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</body>
</html>