在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>
相关推荐
qq_364371721 小时前
Vue 内置组件 keep-alive 中 LRU 缓存淘汰策略和实现
前端·vue.js·缓存
y先森2 小时前
CSS3中的弹性布局之侧轴的对齐方式
前端·css·css3
y先森7 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy7 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189117 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿8 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡9 小时前
commitlint校验git提交信息
前端
emmm4599 小时前
html兼容性问题处理
html
虾球xz10 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇10 小时前
HTML常用表格与标签
前端·html