如何在可捲動 Div 中建立固定標題表？

如何在可捲動Div 中建立固定標題表

常見的Web 開發挑戰是建立具有固定標題的表，即使使用者垂直捲動，該表也保持可見穿過桌體。在本文中，我們將使用兩種方法來探索此問題的解決方案：自訂 CSS 解決方案和基於 JavaScript 的解決方案。

自訂 CSS 解決方案

自訂 CSS 解決方案依賴表頭的絕對定位，並在表體滾動時保持其位置。可以使用以下 CSS：

#table-wrapper {
  position: relative;
}

#table-scroll {
  height: 250px;
  overflow: auto;
  margin-top: 20px;
}

#table-wrapper table {
  width: 100%;
}

#table-wrapper table thead th {
  position: absolute;
  top: 0;
  z-index: 2;
  height: 20px;
  width: 35%;
  border: 1px solid red;
}

此方法只是將標題定位在表格主體上方，並在捲動期間保持其頂部位置。

JavaScript 解決方案

另一種方法利用 JavaScript 來修復標題並處理滾動行為。以下程式碼片段示範了這種方法：

// Get the table and its header
var table = document.getElementById("table");
var header = table.querySelector("thead");

// Clone the header
var cloneHeader = header.cloneNode(true);

// Create a wrapper div for the cloned header
var headerWrapper = document.createElement("div");
headerWrapper.classList.add("header-wrapper");

// Insert the cloned header into the wrapper
headerWrapper.appendChild(cloneHeader);

// Insert the header wrapper into the table
table.insertBefore(headerWrapper, table.firstChild);

// Add event listener for scrolling
table.addEventListener("scroll", function() {
  headerWrapper.style.left = table.scrollLeft + "px";
});

此JavaScript 方法複製標題，將其固定在表格頂部，並在表格滾動時更新其左側位置以保持與表格主體對齊.

兩個解決方案都有效解決了在可捲動div 中建立固定標題表的問題。方法的選擇取決於 Web 專案的特定要求和偏好。

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