在HTML中固定表格表头的简单方法

yivifu

已于 2024-08-13 18:39:20 修改

阅读量108

点赞数 4

分类专栏： web前端文章标签： html 前端 HTML固定表头滚动表格

于 2024-08-13 17:19:23 首次发布

本文链接：https://blog.csdn.net/yivifu/article/details/141167492

版权

web前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

在HTML中，表格元素自身无法提供滚动以及固定表头的配置。借助第三方工具（如jQuery的表头固定插件）或者结合JavaScrip，是可以实现表格的表头固定的，除此之外，本文还想讨论一种更简单的方式来实现。

从思路上说，固定表头可以考虑将表格分成表头及表体两部分，其中表头就是一个普通表格，表体则用一个div包裹起来并通过css属性“overflow-y: scroll”提供滚动功能，即实现了表体的滚动。只要将表头与表体的框线对齐，那么就实现了固定表头滚动表体的效果。

下面是实现这个效果的动图：

上面这个复杂表格固定表头滚动效果实现方法如下：

1、用一个div作为表格容器。

2、表格容器上部为一个表格，内容即表头内容。为了与表体对齐，表头的宽度应该比容器略小，以让出表体部分滚动条的宽度。

3、表格容器的下部为一个容纳表体的div，这个div具有css属性“overflow-y: scroll”，并且必须设置css属性height的值。

4、表格的内容放在表体容器中。

5、表头和表体的符合规定的位置插入<colgroup>标签，按表头的最大列数设置各列的宽度，且表头与表体的设置值完全相同，这样就可以实现表头与表体框线基本对齐。

具体代码如下，其中有详尽注释：

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title>固定表头滚动表格示例</title>
	<style type="text/css">
        //表格的单双行背景色略有差异，非必须
		table tr:nth-child(2n+1) {
			background-color: #f2f2f2;
		}
        //表格框线及单元格内容对齐方式的设置，非必须
		table tr td {
			border: 1px solid red;
			text-align: center;
		}
        //表格的框线折叠起来，以免以双实线的样式展示，非必须
		table{
			border-collapse:collapse;
		}
		
	</style>
</head>

<body>

    <!--表格容器，这里限定了容器占父元素宽度的比例，非必须-->
	<div class='table_container' style="width:80%;">
        <!--表头，宽度不应充满表格容器以便于与表体右边框线的对齐，98.6%是经验数据-->
		<table style='width:98.6%;'>
                <!--表头第二行有七个单元格，下面规定七个单元格的宽度。
                    由于第二行后五个单元格是平均分布列的，所以也可以将后面五个单元格
                    简写为一个<col  />标签，但框线对齐误差可能会比较明显一点。这是
                    这个效果必须提供的配置，并且下面表体部分要与这里的配置完全相同-->
				<colgroup>
					<col style="width: 10%;" />
					<col style="width: 34%;" />
					<col  style="width: 8%;" />
                    <col  style="width: 8%;" />
                    <col  style="width: 8%;" />
                    <col  style="width: 8%;" />
                    <col  style="width: 8%;" />
                    <col  style="width: 8%;" />
				</colgroup>
				<thead>
					<tr>
						<td rowspan="2"><b>编号</b></td>
						<td rowspan="2"><b>资料名称</b></td>
						<td colspan="7"><b>责任部门（岗位）</b></td>
					</tr>
					<tr>
						<td><b>技术</b></td>
						<td><b>质量</b></td>
						<td><b>工程</b></td>
						<td><b>商务</b></td>
						<td><b>物资</b></td>
						<td><b>试验</b></td>
						<td><b>测量</b></td>
					</tr>
				</thead>
			</table>
         <!--表体容器，提供滚动条，必须-->
		<div style="height: 300px;overflow-y: scroll;width:100%;">
            <!--表体应当充满父容器-->
			<table style='width:100%;'>
                 <!--与表头完全相同的列宽配置，为对齐框线所必须-->
				<colgroup>
					<col style="width: 10%;" />
					<col style="width: 34%;" />
					<col  style="width: 8%;" />
                    <col  style="width: 8%;" />
                    <col  style="width: 8%;" />
                    <col  style="width: 8%;" />
                    <col  style="width: 8%;" />
                    <col  style="width: 8%;" />
				</colgroup>
				<tbody>
					<tr>
						<td>C1</td>
						<td>施工管理资料</td>
						<td>●</td>
						<td>●</td>
						<td>●</td>
						<td>●</td>
						<td></td>
						<td></td>
						<td></td>
					</tr>
					<tr>
						<td colspan="2">其中： 施工检测试验计划<br>分项工程和检验批的划分方案<br>检测设备检定证书登记台账</td>
						<td>●</td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
					</tr>
					<tr>
						<td colspan="2">其中： 企业资质证书及相关专业人员岗位证书<br>特种作业人员证书复印件<br>分包单位资质报审表<br>分包资质证书及相关专业人员岗位证书</td>
						<td></td>
						<td></td>
						<td></td>
						<td>●</td>
						<td></td>
						<td></td>
						<td></td>
					</tr>
					<tr>
						<td colspan="2">其中： 施工日志<br>工程开工报审表<br>监理工程师通知回复单</td>
						<td></td>
						<td></td>
						<td>●</td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
					</tr>
					<tr>
						<td colspan="2">其中： 施工现场质量管理检查记录<br>建设工程质量事故调查、勘察记录<br>建设工程质量事故报告书</td>
						<td></td>
						<td>●</td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
					</tr>
					<tr>
						<td>C2</td>
						<td>施工技术资料</td>
						<td>●</td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
					</tr>
					<tr>
						<td colspan="2">其中： 分项工程技术交底记录</td>
						<td></td>
						<td></td>
						<td>●</td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
					</tr>
					<tr>
						<td>C3</td>
						<td>施工测量记录</td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td>●</td>
					</tr>
					<tr>
						<td>C4</td>
						<td>施工物资资料</td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td>●</td>
						<td></td>
						<td></td>
					</tr>
					<tr>
						<td>C5</td>
						<td>施工记录</td>
						<td></td>
						<td></td>
						<td>●</td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
					</tr>
					<tr>
						<td>C6</td>
						<td>施工试验资料</td>
						<td>●</td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td>●</td>
						<td></td>
					</tr>
					<tr>
						<td>C7</td>
						<td>施工质量验收记录</td>
						<td></td>
						<td>●</td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
					</tr>
					<tr>
						<td colspan="2">其中： 分项工程质量验收记录<br>分部（子分部）工程验收记录</td>
						<td>●</td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
					</tr>
					<tr>
						<td>C8</td>
						<td>竣工验收资料</td>
						<td>●</td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
					</tr>
					<tr>
						<td colspan="2">其中： 单位工程质量控制资料核查记录<br>单位工程安全和功能检验资料核查及主要功能抽查记录<br>单位工程观感质量检查记录</td>
						<td></td>
						<td>●</td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
</body>

</html>