如何在代号一滚动时使表头固定

.table-container {
  height: 400px; /* 设置表格容器的高度 */
  overflow: auto; /* 设置溢出属性为自动，使内容超出容器高度时出现滚动条 */
}

<div class="table-container">
  <table>
    <thead>
      <tr>
        <th>表头1</th>
        <th>表头2</th>
        <th>表头3</th>
        <!-- 其他表头列 -->
      </tr>
    </thead>
    <tbody>
      <!-- 表格内容行 -->
    </tbody>
  </table>
</div>

window.addEventListener('scroll', function() {
  var tableContainer = document.querySelector('.table-container');
  var table = document.querySelector('table');
  var tableHeader = table.querySelector('thead');
  
  if (tableContainer.scrollTop > 0) {
    tableHeader.classList.add('fixed'); // 添加固定表头的样式类
  } else {
    tableHeader.classList.remove('fixed'); // 移除固定表头的样式类
  }
});

.fixed {
  position: sticky; /* 设置定位属性为sticky，使表头固定在页面顶部 */
  top: 0; /* 设置距离顶部的偏移量为0 */
  z-index: 1; /* 设置层级为1，确保固定表头在滚动时始终在最上层 */
}