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 {
  width: 100%;
  overflow-y: auto;
  height: 300px; /* 设置一个固定高度以便出现滚动条 */
}

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

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

window.addEventListener('scroll', function() {
  var tableHeader = document.querySelector('.table-container thead');
  if (window.pageYOffset > tableHeader.offsetTop) {
    tableHeader.style.position = 'fixed';
    tableHeader.style.top = '0';
  } else {
    tableHeader.style.position = '';
    tableHeader.style.top = '';
  }
});