如何使用 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>

以上是如何使用 CSS 和 JavaScript 在 HTML 中滾動正文時保持表頭固定？的詳細內容。更多資訊請關注PHP中文網其他相關文章！