实现 table header 吸顶， 有哪些实现方式？

实现 table header 吸顶的效果有几种方法，主要包括使用 CSS 的 position: sticky 属性、JavaScript 的滚动监听、以及使用第三方库。

以下是常见的实现方式：

1. 使用 position: sticky

• 定义：CSS position: sticky 属性使元素在滚动到一定位置时固定在视口的某个位置。
• 实现：

  <style>
    .table-container {
      max-height: 400px; /* 限制表格容器的高度 */
      overflow-y: auto; /* 启用垂直滚动条 */
    }
    table {
      width: 100%;
      border-collapse: collapse;
    }
    th {
      position: sticky;
      top: 0; /* 吸顶位置 */
      background: #f1f1f1; /* 背景色以遮盖滚动内容 */
      z-index: 1; /* 确保 th 在内容之上 */
    }
  </style>
  <div class="table-container">
    <table>
      <thead>
        <tr>
          <th>Header 1</th>
          <th>Header 2</th>
          <th>Header 3</th>
        </tr>
      </thead>
      <tbody>
        <!-- Table rows go here -->
      </tbody>
    </table>
  </div>
  

2. 使用 JavaScript 滚动监听

• 定义：通过监听滚动事件，将表头的 position 设置为 fixed 来实现吸顶效果。

• 实现：

  <style>
    .table-container {
      max-height: 400px; /* 限制表格容器的高度 */
      overflow-y: auto; /* 启用垂直滚动条 */
    }
    table {
      width: 100%;
      border-collapse: collapse;
    }
    th.fixed {
      position: fixed;
      top: 0; /* 吸顶位置 */
      background: #f1f1f1; /* 背景色以遮盖滚动内容 */
      z-index: 1; /* 确保 th 在内容之上 */
    }
  </style>
  <div class="table-container" id="tableContainer">
    <table>
      <thead>
        <tr id="header">
          <th>Header 1</th>
          <th>Header 2</th>
          <th>Header 3</th>
        </tr>
      </thead>
      <tbody>
        <!-- Table rows go here -->
      </tbody>
    </table>
  </div>
  
  <script>
    const tableContainer = document.getElementById("tableContainer");
    const header = document.getElementById("header");
  
    tableContainer.addEventListener("scroll", () => {
      if (tableContainer.scrollTop > 0) {
        header.classList.add("fixed");
      } else {
        header.classList.remove("fixed");
      }
    });
  </script>
  

3. 使用第三方库

• 例子：可以使用像 DataTables 或 Sticky Table Headers 这样的库，它们提供了更复杂的表头固定功能和其他表格功能。
• 实现：通常只需要引入库和配置选项即可实现固定表头的效果。例如，使用 DataTables 的配置选项：

  $(document).ready(function () {
    $("#example").DataTable({
      scrollY: "400px",
      scrollCollapse: true,
      paging: false,
    });
  });