首先要明确功能需求：

  1. 固定表头
  2. table垂直滚动条
  3. 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>
# css # css3 # html
Logo
开放原子开发者工作坊

开放原子开发者工作坊旨在鼓励更多人参与开源活动，与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动，如meetup、训练营等，主打技术交流，干货满满，真诚地邀请各位开发者共同参与！

更多推荐

cover

赛项征集 | 第二届开放原子开源大赛——汽车软件开源赛火热进行中

avatar 开放原子开发者工作坊

开放原子校源行启动优质开源课程征集，助力高校开源人才培养

校源行启动优质开源课程征集，助力高校开源人才培养

avatar 开放原子开发者工作坊
cover

第二届Open Source Congress在北京成功举办

avatar 开放原子开发者工作坊