在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>
