拖动滚动条，保持表头固定的HTML写法

最新推荐文章于 2025-07-04 09:29:35 发布

原创最新推荐文章于 2025-07-04 09:29:35 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

这个示例展示了如何在HTML中创建一个带有滚动条的表格，并保持表头在滚动时始终可见。通过使用jQuery和CSS，实现了表头与内容区域的同步滚动和宽度匹配，以提供更好的数据浏览体验。

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

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js">
</script>
<style>
.bg{
	width:430px;
	overflow-x: scroll;
	position: relative;
}
#table2{
    display: block;
	background-color: #dedede;
	position: absolute;
	left:0;
	top:0;
}
#table2 thead{
	display:block;
}
#table1{
	height: 380px;
    overflow-y: scroll;
    display: block;
}
</style>
</head>

<body>
<div class="bg" style="">
	<table id="table2" border="1px">
		<thead>
			<tr>
				<th>序号</th>
				<th>sdfsdgsgsdg</th>
				<th>dfgccccccccccccccc</th>
				<th>tghrthrhrhh</th>
				<th>yyyyccccccccc</th>
			</tr>
		</thead>
	</table>
	
	<table id="table1" border="1px">
		<thead>
			<tr>
				<th>序号</th>
				<th>sdfsdgsgsdg</th>
				<th>dfgccccccccccccccc</th>
				<th>tghrthrhrhh</th>
				<th>yyyyccccccccc</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>xxx</td>
				<td>2</td>
				<td>32g反反复复反反复复反反复复反反复复反反复复反反复复反反复复反反复复反反复复反反复复反反复复反反复复</td>
				<td><div style="width:50px;word-wrap: break-word;">4defdfdfdfwerwerwerwerwerwerwerwerwrwerwerwerwerwrdfdfdfdfdfdf</div></td>
				<td>反反复复反反复复</td>
			</tr>
			<tr>
				<td>1111111</td>
				<td>2</td>
				<td>32</td>
				<td>4defdfdfdfdfdfdfdfdfdf</td>
				<td>反反复复反反复复</td>
			</tr>
			<tr>
				<td>1111111</td>
				<td>2</td>
				<td>32</td>
				<td>ccc</td>
				<td>反反复复反反复复</td>
			</tr>
			<tr>
				<td>1111111</td>
				<td>2</td>
				<td>32</td>
				<td>4defdfdfdfdfdfdfdfdfdf</td>
				<td>反反复复反反复复</td>
			</tr>
			<tr>
				<td>1111111</td>
				<td>2</td>
				<td>32</td>
				<td>4defdfdfdfdfdfdfdfdfdf</td>
				<td>反反复复反反复复</td>
			</tr>
			<tr>
				<td>1111111</td>
				<td>2</td>
				<td>32</td>
				<td>4defdfdfdfdfdfdfdfdfdf</td>
				<td>333</td>
			</tr>
		</tbody>
	</table>
</div>

<script>
/**
* table2: 展示在最前端的实际表头
* table1: 展示在最前端的实际表格内容
*
* table1是可以上下滚动的窗口
* table2悬浮覆盖在table1上，遮住table1表头
*
* table1中的表头宽度和表格列宽是一致的，就使用table1的表头作为标准，来修改table2的表头宽度
*/
function initTableUI(){
	var tttttt = [];
	$("#table1 thead tr th").each(function(index, jq){
		jq = $(jq);
		tttttt[index] = jq.width();
	});
	
	$("#table2 thead tr th").each(function(index, jq){
		jq = $(jq);
		jq.css("width", tttttt[index]+"px");
	});

	
	$("#table2 thead").css({"width":$("#table1 thead").width()});
	$("#table2").css("width", $("#table2 thead").width() + "px");
	$("#table1").css("width", ($("#table2 thead").width() + 18) + "px");
}
initTableUI();
</script>
</body>
</html>