CSS如何实现表头冻结效果

在网页中，我们经常需要实现表格的表头冻结效果，以便在滚动表格时保持表头的可见性。下面是一个完整攻略，包含了如何使用 CSS 实现表头冻结效果的过程和两个示例说明。

CSS 实现表头冻结效果的过程

1. 使用 position: sticky

我们可以使用 CSS 的 position: sticky 属性来实现表头冻结效果。position: sticky 属性可以将元素固定在容器的顶部或底部，直到容器的滚动到达指定位置。下面是一个示例：

<div class="table-container">
  <table>
    <thead>
      <tr>
        <th>表头1</th>
        <th>表头2</th>
        <th>表头3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>内容1</td>
        <td>内容2</td>
        <td>内容3</td>
      </tr>
      <tr>
        <td>内容4</td>
        <td>内容5</td>
        <td>内容6</td>
      </tr>
      <!-- more rows -->
    </tbody>
  </table>
</div>

.table-container {
  height: 200px;
  overflow-y: scroll;
}

table {
  width: 100%;
  border-collapse: collapse;
}

thead th {
  position: sticky;
  top: 0;
  background-color: #fff;
}

上述代码中，我们使用 position: sticky 属性来实现表头冻结效果。我们将表头的 th 元素设置为 sticky，并将其 top 属性设置为 0，以将其固定在容器的顶部。我们还将表头的背景颜色设置为白色，以使其与表格的内容区域区分开来。

2. 使用 JavaScript

我们也可以使用 JavaScript 来实现表头冻结效果。下面是一个示例：

<div class="table-container">
  <table>
    <thead>
      <tr>
        <th>表头1</th>
        <th>表头2</th>
        <th>表头3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>内容1</td>
        <td>内容2</td>
        <td>内容3</td>
      </tr>
      <tr>
        <td>内容4</td>
        <td>内容5</td>
        <td>内容6</td>
      </tr>
      <!-- more rows -->
    </tbody>
  </table>
</div>

.table-container {
  height: 200px;
  overflow-y: scroll;
}

table {
  width: 100%;
  border-collapse: collapse;
}

thead th {
  background-color: #fff;
}

const tableContainer = document.querySelector('.table-container');
const tableHead = document.querySelector('thead');
const tableHeadClone = tableHead.cloneNode(true);

tableHeadClone.classList.add('sticky');
tableContainer.appendChild(tableHeadClone);

tableContainer.addEventListener('scroll', () => {
  tableHeadClone.style.transform = `translateY(${tableContainer.scrollTop}px)`;
});

上述代码中，我们使用 JavaScript 来实现表头冻结效果。我们首先使用 cloneNode() 方法克隆表头元素，并将其添加到容器的末尾。我们还为克隆的表头元素添加了一个 sticky 类，以便在滚动时将其固定在容器的顶部。我们使用 addEventListener() 方法监听容器的滚动事件，并使用 transform 属性将克隆的表头元素移动到正确的位置。

示例说明

下面是两个示例，演示如何使用 CSS 和 JavaScript 实现表头冻结效果。

示例一：使用 position: sticky

<div class="table-container">
  <table>
    <thead>
      <tr>
        <th>表头1</th>
        <th>表头2</th>
        <th>表头3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>内容1</td>
        <td>内容2</td>
        <td>内容3</td>
      </tr>
      <tr>
        <td>内容4</td>
        <td>内容5</td>
        <td>内容6</td>
      </tr>
      <!-- more rows -->
    </tbody>
  </table>
</div>

.table-container {
  height: 200px;
  overflow-y: scroll;
}

table {
  width: 100%;
  border-collapse: collapse;
}

thead th {
  position: sticky;
  top: 0;
  background-color: #fff;
}

上述代码中，我们使用 position: sticky 属性来实现表头冻结效果。我们将表头的 th 元素设置为 sticky，并将其 top 属性设置为 0，以将其固定在容器的顶部。我们还将表头的背景颜色设置为白色，以使其与表格的内容区域区分开来。

示例二：使用 JavaScript

<div class="table-container">
  <table>
    <thead>
      <tr>
        <th>表头1</th>
        <th>表头2</th>
        <th>表头3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>内容1</td>
        <td>内容2</td>
        <td>内容3</td>
      </tr>
      <tr>
        <td>内容4</td>
        <td>内容5</td>
        <td>内容6</td>
      </tr>
      <!-- more rows -->
    </tbody>
  </table>
</div>

.table-container {
  height: 200px;
  overflow-y: scroll;
}

table {
  width: 100%;
  border-collapse: collapse;
}

thead th {
  background-color: #fff;
}

const tableContainer = document.querySelector('.table-container');
const tableHead = document.querySelector('thead');
const tableHeadClone = tableHead.cloneNode(true);

tableHeadClone.classList.add('sticky');
tableContainer.appendChild(tableHeadClone);

tableContainer.addEventListener('scroll', () => {
  tableHeadClone.style.transform = `translateY(${tableContainer.scrollTop}px)`;
});

上述代码中，我们使用 JavaScript 来实现表头冻结效果。我们首先使用 cloneNode() 方法克隆表头元素，并将其添加到容器的末尾。我们还为克隆的表头元素添加了一个 sticky 类，以便在滚动时将其固定在容器的顶部。我们使用 addEventListener() 方法监听容器的滚动事件，并使用 transform 属性将克隆的表头元素移动到正确的位置。