js表格表头悬浮

<div class="table-container">
  <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>
</div>

.table-container {
  height: 300px; /* 设置一个固定高度 */
  overflow-y: auto; /* 允许垂直滚动 */
}

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

thead th {
  position: sticky;
  top: 0; /* 固定在顶部 */
  background-color: #f2f2f2; /* 设置背景颜色 */
  z-index: 1; /* 确保表头在数据行之上 */
}

// 如果需要动态调整表头，可以使用JavaScript监听滚动事件
window.addEventListener('scroll', function() {
  const tableHeader = document.querySelector('thead th');
  if (window.pageYOffset > tableHeader.offsetTop) {
    tableHeader.style.position = 'fixed';
    tableHeader.style.top = '0';
  } else {
    tableHeader.style.position = '';
    tableHeader.style.top = '';
  }
});