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

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

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

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

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

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

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

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

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

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

具体代码如下,其中有详尽注释:

html 复制代码
<!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>
相关推荐
知花实央l23 分钟前
【Web应用实战】 文件上传漏洞实战:Low/Medium/High三级绕过(一句话木马拿webshell全流程)
前端·学习·网络安全·安全架构
华仔啊23 分钟前
JavaScript + Web Audio API 打造炫酷音乐可视化效果,让你的网页跟随音乐跳起来
前端·javascript
鸡吃丸子26 分钟前
SEO入门
前端
檀越剑指大厂1 小时前
【Nginx系列】Tengine:基于 Nginx 的高性能 Web 服务器与反向代理服务器
服务器·前端·nginx
是你的小橘呀1 小时前
深入理解 JavaScript 预编译:从原理到实践
前端·javascript
uhakadotcom1 小时前
在使用cloudflare workers时,假如有几十个请求,如何去控制并发?
前端·面试·架构
风止何安啊1 小时前
栈与堆的精妙舞剧:JavaScript 数据类型深度解析
前端·javascript
用户47949283569151 小时前
Chrome DevTools MCP:让 AI 助手直接操作浏览器开发工具
前端·javascript·chrome
Rysxt_2 小时前
Vuex 教程 从入门到实践
前端·javascript·vue.js
by__csdn2 小时前
Node.js版本与npm版本的对应关系
前端·npm·node.js