如何使用 CSS 转换创建具有固定标题的 HTML 表格？

具有固定标题的 HTML 表格

问题陈述

创建一个 HTML 表格，其中列标题在屏幕上保持固定当您滚动浏览表格内容时。这模仿了 Microsoft Excel 中的“冻结窗格”功能。

现代浏览器解决方案

使用 CSS 转换，修复标题对于现代浏览器来说非常简单：

1. 设置表的“thead”的“transform”属性元素。
2. 按当前的scrollTop 值进行翻译。
3. 监听包含元素上的“scroll”事件（“#wrap”）。

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

支持和示例

CSS 转换得到广泛支持，除了Internet Explorer 8-.

以下是完整示例：

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

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

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

<div>

以上是如何使用 CSS 转换创建具有固定标题的 HTML 表格？的详细内容。更多信息请关注PHP中文网其他相关文章！