如何使用 CSS 和 JavaScript 在 HTML 中滚动正文时保持表头固定？

是否有跨浏览器 CSS/JavaScript 技术来显示长 HTML 表格，使列标题在屏幕上保持固定并且不随表格主体滚动？

在 Microsoft Excel 中，我们经常使用“冻结窗格”功能来在滚动表格内容时保持列标题稳定。 HTML 中是否有类似的跨浏览器技术？

使用 CSS 转换，只需四行 JavaScript 代码即可完成：

1. 使用以下命令将表格包装在容器中ID“wrap”并将其溢出属性设置为“auto”。
2. 监听“scroll”事件容器。
3. 在事件处理程序内，根据scrollTop 属性计算翻译值。
4. 使用transform 属性将计算出的翻译值应用到表的thead 元素。

这种方法有以下优点：

• 干净高效，仅使用四行JavaScript。
• 无外部 JavaScript 依赖项。
• 适用于所有表格配置，包括固定布局。
• 支持现代浏览器，包括 Chrome、Safari、Firefox 和 Edge。

这是代码：

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

下面是完整示例供参考：

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

// CSS
#wrap {
    overflow: auto;
    height: 400px;
}

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

// HTML
<div></div>

以上是如何使用 CSS 和 JavaScript 在 HTML 中滚动正文时保持表头固定？的详细内容。更多信息请关注PHP中文网其他相关文章！