如何使用 CSS 轉換在 HTML 表格中建立固定標題？

固定標題的 HTML 表格？

對於大型 HTML 表格，由於頁面原因，快速引用行和列變得困難滾動。將列標題固定在表格頂部會很有幫助，類似於 Microsoft Excel 中的「凍結窗格」功能。

現代瀏覽器的 CSS 轉換

對於現代瀏覽器，CSS 轉換提供了一個簡單的解決方案。在不改變現有HTML 或CSS 的情況下，您只需四行程式碼即可實現固定標頭：

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

此程式碼將捲動事件偵聽器附加到容器元素（本例中為「wrap」）並動態附加更新表格頭（「thead」）的CSS 轉換以符合表格的垂直捲動位置。這可確保標題保持固定在表格頂部，同時允許正文在下方捲動。

完整範例

以下是示範此功能的完整範例技術：

<div>

以上是如何使用 CSS 轉換在 HTML 表格中建立固定標題？的詳細內容。更多資訊請關注PHP中文網其他相關文章！