如何在捲動時保持 HTML 表格標題固定？

捲動時可以保持 HTML 表格標題固定嗎？

HTML 表格是顯示表格資料的好方法。但是，當表格很長時，可能很難追蹤列標題。如果表格很寬且標題在螢幕上不可見，則尤其如此。

解決此問題的一種方法是凍結列標題，以便即使在表格滾動時它們也保持可見。這可以使用各種 CSS 和 JavaScript 技術來實現。

CSS 轉換

如果您只關心現代瀏覽器，則透過使用 CSS 轉換可以更輕鬆地實現固定標頭。其運作原理如下：

1. 將事件監聽器加入表格包裝器。 捲動表時將觸發此監聽器。
2. 取得包裝器的scrollTop值。 此值表示表格已捲動的像素數垂直。
3. 對表格標題套用平移轉換。 此轉換會將標題向上移動與表格滾動相同的像素數。

這是此技術的 JavaScript 程式碼：

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

這是一個完整的範例參考：

<div>

#wrap {
    width: 100%;
    height: 400px;
    overflow: auto;
}

th {
    width: 200px;
}

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

以上是如何在捲動時保持 HTML 表格標題固定？的詳細內容。更多資訊請關注PHP中文網其他相關文章！