CSS 如何将表格行固定在顶部

在本文中，我们将介绍如何使用CSS将表格中的某一行固定在顶部，以便在滚动页面时保持该行的可见性。这在处理大型表格数据时非常有用，因为用户可以随时查看表格的标题或重要信息。

阅读更多：https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS 教程

方法1：使用CSS `position`属性和`sticky`定位

首先，我们可以使用CSS的position属性和sticky定位来实现固定表格行的效果。position属性用于定义一个元素的定位方式，而sticky定位会使元素在滚动到特定位置时变为固定状态。

下面是一个基本的示例，展示如何将表格中的第一行固定在顶部：

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

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

.tr {
  background-color: #f9f9f9;
}

.td {
  padding: 10px;
  border: 1px solid #ccc;
}

<table class="table">
  <thead>
    <tr class="th">
      <th class="td">Header 1</th>
      <th class="td">Header 2</th>
      <th class="td">Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr class="tr">
      <td class="td">Data 1</td>
      <td class="td">Data 2</td>
      <td class="td">Data 3</td>
    </tr>
    <tr class="tr">
      <td class="td">Data 4</td>
      <td class="td">Data 5</td>
      <td class="td">Data 6</td>
    </tr>
  </tbody>
</table>

在上述示例中，我们使用了.table类来设置表格的样式，.th类来将表格的第一行设置为固定位置，.tr类用于设置其他行的样式，.td类用于设置单元格的样式。使用position: sticky;将.th类的行设置为固定位置，并通过top: 0;将其固定在顶部。

方法2：使用CSS `position`属性和`transform`属性

除了使用position属性和sticky定位外，我们还可以使用position属性和transform属性来实现固定表格行的效果。

下面是一个示例，展示了如何将表格中的第一行固定在顶部：

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

.th {
  position: sticky;
  top: 0;
  background-color: #fff;
  transform: translateY(0);
}

.tr {
  background-color: #f9f9f9;
}

.td {
  padding: 10px;
  border: 1px solid #ccc;
}

<table class="table">
  <thead>
    <tr class="th">
      <th class="td">Header 1</th>
      <th class="td">Header 2</th>
      <th class="td">Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr class="tr">
      <td class="td">Data 1</td>
      <td class="td">Data 2</td>
      <td class="td">Data 3</td>
    </tr>
    <tr class="tr">
      <td class="td">Data 4</td>
      <td class="td">Data 5</td>
      <td class="td">Data 6</td>
    </tr>
  </tbody>
</table>

在上述示例中，我们同样使用了.table类来设置表格的样式，.th类将表格的第一行设置为固定位置。使用position: sticky;和top: 0;将.th类的行固定在顶部，并使用transform: translateY(0);来改变其定位，使其保持固定状态。

需要注意的是，position: sticky;属性需要在支持的浏览器中才能正确地呈现。在一些旧的浏览器中可能无法正常工作。