大型 HTML 表格中的固定标题
4.76/5 (33投票s)
有很多方法可以固定 HTML 表格的表头列和行。但是当表格变得更大时，大多数方法都不可用，因为滚动速度会变得非常慢。 在本文中，我将展示一种适用于 IE 的方法。
引言
有很多方法可以固定 HTML 表格的表头列和行。但是当表格变得更大时，大多数方法都不可用，因为滚动速度会变得非常慢。 在下面的示例中，我将展示一种适用于 IE 的方法。
我的 HTML 页面包含两个 div 和一个表格。
...
<div id="outerDiv">
<div id="innerDiv">
<table>
...
</table>
</div>
</div>
...
在我的示例中，表格如下所示（红色边框显示 innerDiv）
主要思想是将带有表格的 innerDiv 复制三次，以便为表头行、表头列、表头行中的第一个单元格和表格主体分别创建一个 div。
- 在前三个
div中，必须将overflow设置为hidden。 - 在主体
div中，如果主体大于可用空间，可以将overflow设置为scroll。 此外，主体div中的表格需要绝对定位。Top和Left位置必须为负值（Top= 表头行的高度，Left= 表头列的宽度），以便表头不再超出主体div的范围。
通过复制整个表格，所有行和列将具有相同的宽度和高度。 如果您只将表格的第一行复制到表头 div，则表头列的宽度可能与主体列不同。 复制 div 后，我的 outerDiv 包含四个 innerDiv（红色边框显示 innerDiv）
最后，需要同步滚动这些 div。 当您向右滚动时，表头行也必须向右移动，当您向下滚动时，表头列也需要移动。 我在 这里 找到了一种很好的方法来做到这一点。
您可以在 这里 查看在线演示。