如何在滚动时保持 HTML 表格标题固定？

滚动时可以保持 HTML 表格标题固定吗？

HTML 表格是显示表格数据的好方法。但是，当表格很长时，可能很难跟踪列标题。如果表格很宽并且标题在屏幕上不可见，则尤其如此。

解决此问题的一种方法是冻结列标题，以便即使在表格滚动时它们也保持可见。这可以使用各种 CSS 和 JavaScript 技术来实现。

CSS 转换

如果您只关心现代浏览器，则通过使用 CSS 转换可以更轻松地实现固定标头。其工作原理如下：

1. 向表包装器添加事件监听器。滚动表时将触发此监听器。
2. 获取包装器的scrollTop值。该值表示表格已滚动的像素数垂直。
3. 对表格标题应用平移转换。此转换会将标题向上移动与表格滚动相同的像素数。

这是此技术的 JavaScript 代码：

document.getElementById("wrap").addEventListener("scroll", function() {
   var translate = "translate(0," + this.scrollTop + "px)";
   this.querySelector("thead").style.transform = translate;
});

这是一个完整的示例参考：

<div><pre class="brush:php;toolbar:false">#wrap {
    width: 100%;
    height: 400px;
    overflow: auto;
}

th {
    width: 200px;
}

td {
    width: 200px;
    height: 100px;
    background-color: lightgray;
}