position：sticky隔行变色

可以通过 `position: sticky` 和 `nth-child` 选择器来实现隔行变色效果。首先，设置表格的奇数行和偶数行的背景颜色不同，例如：

tr:nth-child(even) {
  background-color: #f2f2f2;
}

tr:nth-child(odd) {
  background-color: #fff;
}

然后，对于表格内容比较多的情况，可以设置表头（第一行）为 `position:sticky`，使其在滚动时固定在顶部，例如：

thead tr {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: #fff;
}

这样就可以实现隔行变色并且表头固定的效果。完整的示例代码如下所示：

<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1, Column 1</td>
      <td>Row 1, Column 2</td>
      <td>Row 1, Column 3</td>
    </tr>
    <tr>
      <td>Row 2, Column 1</td>
      <td>Row 2, Column 2</td>
      <td>Row 2, Column 3</td>
    </tr>
    <tr>
      <td>Row 3, Column 1</td>
      <td>Row 3, Column 2</td>
      <td>Row 3, Column 3</td>
    </tr>
    <tr>
      <td>Row 4, Column 1</td>
      <td>Row 4, Column 2</td>
      <td>Row 4, Column 3</td>
    </tr>
    <tr>
      <td>Row 5, Column 1</td>
      <td>Row 5, Column 2</td>
      <td>Row 5, Column 3</td>
    </tr>
  </tbody>
</table>

<style>
  table {
    width: 100%;
    border-collapse: collapse;
  }
  tr:nth-child(even) {
    background-color: #f2f2f2;
  }
  tr:nth-child(odd) {
    background-color: #fff;
  }
  thead tr {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: #fff;
  }
</style>