js table 冻结行

<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
      <!-- 更多表头 -->
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
      <!-- 更多数据 -->
    </tr>
    <!-- 更多行 -->
  </tbody>
</table>

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

th, td {
  padding: 8px;
  border: 1px solid #ddd;
}

thead th {
  position: sticky;
  top: 0;
  background-color: #f2f2f2; /* 固定行背景色 */
  z-index: 1; /* 确保表头在最上层 */
}

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

thead th + th {
  top: 40px; /* 假设第一行高度为40px */
}