固定表头可以纵向滚动的html表格

最新推荐文章于 2023-04-14 13:34:06 发布

Jjwxyz

最新推荐文章于 2023-04-14 13:34:06 发布

阅读量4.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： html5 文章标签： html 设计

本文链接：https://blog.youkuaiyun.com/Jjwxyz/article/details/50594806

html5 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种设计思路，通过将HTML表格的表头和内容分开，放入两个不同的<table>标签中，并利用<div>实现滚动效果。内容部分放置在一个设置高度并开启overflow:auto的div中，确保当表格内容过多时出现滚动条。同时，通过设置单元格宽度保持表头和内容的列宽一致。提供两种不同内容量时的效果图以及相关源代码。

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

设计思路：

将表格的表头与内容分别放到两个<table>标签里，然后将其放在一个<div>里以使表头和表格的总宽度一致，将表格内容放到一个可滚动的div(<div style="overflow:auto;height:150px">)里，为每个单元格添加类来固定宽度以实现表头与内容的单元格宽度一致。

这种方式当表格内容很少，达不到可滚动容器的高度时不显示滚动条，当表格内容超过这个高度时，显示滚动条，可以通过滑动滚动条来查看表格内容。

效果图：

当表格内容很少时：

当表格内容多时：

源代码：

<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset="UTF-8">
	<title>固定表头可以纵向滚动的html表格</title>
	<style type="text/css">
	#table_div{
		width:80%;
		margin-left: 50px;
	}
	#table_header{
		background-color: #7fffd4;
	}
	.col1,.col2,.col3{
		width: 20%
	}
	.col4{
		width:40%;
	}
	</style>
</head>
<body>
	<div id="table_div">
		<table width="100%">
			<tr id="table_header">
				<th class="col1">学号</th>
				<th class="col2">姓名</th>
				<th class="col3">年级</th>
				<th class="col4">家庭住址</th>
			</tr>	
		</table>
		<div style="overflow:auto;height:100px">
			<table width="100%">
				<tr>
					<td class="col1">11111111</td>
					<td class="col2">张三</td>
					<td class="col3">2013级</td>
					<td class="col4">吉林省长春市前进大街2699号</td>
				</tr>
				<tr>
					<td class="col1">11111111</td>
					<td class="col2">张三</td>
					<td class="col3">2013级</td>
					<td class="col4">吉林省长春市前进大街2699号</td>
				</tr>
				<tr>
					<td class="col1">11111111</td>
					<td class="col2">张三</td>
					<td class="col3">2013级</td>
					<td class="col4">吉林省长春市前进大街2699号</td>
				</tr>
				<tr>
					<td class="col1">11111111</td>
					<td class="col2">张三</td>
					<td class="col3">2013级</td>
					<td class="col4">吉林省长春市前进大街2699号</td>
				</tr>
				<tr>
					<td class="col1">11111111</td>
					<td class="col2">张三</td>
					<td class="col3">2013级</td>
					<td class="col4">吉林省长春市前进大街2699号</td>
				</tr>
				<tr>
					<td class="col1">11111111</td>
					<td class="col2">张三</td>
					<td class="col3">2013级</td>
					<td class="col4">吉林省长春市前进大街2699号</td>
				</tr>
				<tr>
					<td class="col1">11111111</td>
					<td class="col2">张三</td>
					<td class="col3">2013级</td>
					<td class="col4">吉林省长春市前进大街2699号</td>
				</tr>
				<tr>
					<td class="col1">11111111</td>
					<td class="col2">张三</td>
					<td class="col3">2013级</td>
					<td class="col4">吉林省长春市前进大街2699号</td>
				</tr>
			</table>
		</div>
	</div>
</body>
</html>