冻结html表格中的两行标题

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

.table-container {
  height: 400px; /* 设置表格容器的高度，使其可以滚动 */
  overflow-y: scroll; /* 垂直滚动条 */
}

thead th {
  position: sticky;
  top: 0;
  background-color: #fff; /* 设置背景色，使表头可见 */
}

window.addEventListener('DOMContentLoaded', function() {
  var tableContainer = document.querySelector('.table-container');
  tableContainer.addEventListener('scroll', function() {
    var translate = 'translate(0,' + this.scrollTop + 'px)';
    this.querySelector('thead').style.transform = translate;
  });
});