如何在可滚动 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中文网其他相关文章！