在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>
相关推荐
快起来别睡了8 分钟前
深入理解 Promise 的高阶用法:从入门到手写实现
前端
yvvvy13 分钟前
前端跨域全解析:从 CORS 到 postMessage,再到 WebSocket
前端·javascript·trae
摸着石头过河的石头1 小时前
手把手教你用VS Code玩转Gitee协作:从环境配置到高效提交
前端·visual studio code
张志鹏PHP全栈1 小时前
Vue3第十八天,Vue3中的组件通信
前端·vue.js
小周同学:1 小时前
在 Vue2 中使用 pdf.js + pdf-lib 实现 PDF 预览、手写签名、文字批注与高保真导出
开发语言·前端·javascript·vue.js·pdf
m0_494716682 小时前
CSS中实现一个三角形
前端·css
teeeeeeemo2 小时前
跨域及解决方案
开发语言·前端·javascript·笔记
JSON_L2 小时前
Vue Vant应用-数据懒加载
前端·javascript·vue.js
可爱小仙子2 小时前
vue-quill-editor上传图片vue3
前端·javascript·vue.js
じòぴé南冸じょうげん3 小时前
解决ECharts图表上显示的最小刻度不是设置的min值的问题
前端·javascript·echarts