如何固定页面中表格的表头？

.table-container {
  overflow: auto;
}

.table-header {
  position: sticky;
  top: 0;
  background-color: #f5f5f5;
}

<div class="table-container">
  <table>
    <thead>
      <tr class="table-header">
        <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 tableHeader = document.querySelector('.table-header');
  var tableRect = tableContainer.getBoundingClientRect();

  if (tableRect.top <= 0 && tableRect.bottom >= tableHeader.offsetHeight) {
    tableHeader.classList.add('fixed');
  } else {
    tableHeader.classList.remove('fixed');
  }
});