【css】如何实现自定义滚动悬浮置顶、固定表头

要实现自定义滚动时的悬浮置顶效果，并且固定表头，可以使用 CSS 的 position: sticky; 属性。这里是一个简单的例子：

HTML:

<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <!-- 表格内容 -->
  </tbody>
</table>

CSS:

table {
  width: 100%;
  border-collapse: collapse;
}
 
thead th {
  position: sticky;
  top: 0;
  background-color: white;
  z-index: 10;
}
 
tbody tr:nth-child(odd) {
  background-color: #f2f2f2;
}
 
tbody tr:nth-child(even) {
  background-color: #ffffff;
}

在这个例子中，<thead> 内的 <tr> 是固定的，并且在滚动时会始终保持在视图的顶部。position: sticky; 会在元素达到指定的 top 位置时将其固定。z-index 确保表头在内容之上。

请注意，position: sticky; 在某些旧浏览器中不受支持，因此请根据目标用户群的浏览器使用情况进行测试。