如何制作带有粘性标题的可滚动表格

<div class="table-container">
  <table>
    <thead>
      <tr>
        <th>标题1</th>
        <th>标题2</th>
        <th>标题3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>数据1</td>
        <td>数据2</td>
        <td>数据3</td>
      </tr>
      <!-- 更多数据行 -->
    </tbody>
  </table>
</div>

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

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

th, td {
  padding: 8px;
  border: 1px solid #ddd;
}

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

var tableContainer = document.querySelector('.table-container');
tableContainer.addEventListener('scroll', function() {
  var tableHeader = document.querySelector('thead th');
  if (tableContainer.scrollTop > 0) {
    tableHeader.classList.add('sticky');
  } else {
    tableHeader.classList.remove('sticky');
  }
});