如何使用 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中文網其他相關文章！