为行数和列数未知的表制作固定的表头

<div class="table-container">
  <table id="original-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 {
  overflow: auto;
  max-height: 300px; /* 设置表格容器的最大高度，超出部分将出现滚动条 */
}

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

#original-table th,
#original-table td {
  border: 1px solid #ccc;
  padding: 8px;
}

.fixed-header-table {
  position: sticky;
  top: 0;
  background-color: #fff;
  z-index: 1;
}

window.addEventListener('DOMContentLoaded', function() {
  var originalTable = document.getElementById('original-table');
  var originalHeader = originalTable.querySelector('thead');
  var tableContainer = document.querySelector('.table-container');

  var cloneHeader = originalHeader.cloneNode(true);
  cloneHeader.id = 'fixed-header';
  cloneHeader.classList.add('fixed-header-table');

  tableContainer.insertBefore(cloneHeader, originalTable);

  tableContainer.addEventListener('scroll', function() {
    cloneHeader.style.transform = 'translateY(' + tableContainer.scrollTop + 'px)';
  });
});