使用水平滚动使粘滞表表头移动

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

.table-container {
  height: 300px; /* 设置表格容器的高度 */
  overflow: auto; /* 启用滚动条 */
}

table {
  width: 100%; /* 设置表格宽度 */
}

thead th {
  position: sticky; /* 设置表头为粘滞定位 */
  top: 0; /* 将表头置于表格容器顶部 */
  background-color: #f5f5f5; /* 设置表头背景色 */
}

var tableContainer = document.querySelector('.table-container');
var tableHeader = document.querySelector('thead th');

tableContainer.addEventListener('scroll', function() {
  tableHeader.style.transform = 'translateX(' + tableContainer.scrollLeft + 'px)';
});