如何让我的CSS滚动固定到表头和第一列(我也愿意使用JS或JQuery)

<div class="table-container">
  <table>
    <thead>
      <tr>
        <th>表头1</th>
        <th>表头2</th>
        <th>表头3</th>
        <!-- 其他表头列 -->
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>第一列</td>
        <td>数据1</td>
        <td>数据2</td>
        <!-- 其他数据列 -->
      </tr>
      <!-- 其他行 -->
    </tbody>
  </table>
</div>

.table-container {
  width: 100%;
  overflow: auto;
}

table {
  border-collapse: collapse;
  width: max-content;
}

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

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

tbody td:first-child {
  position: sticky;
  left: 0;
  background-color: #f5f5f5;
}

$(document).ready(function() {
  $('.table-container').scroll(function() {
    var scrollLeft = $('.table-container').scrollLeft();
    var scrollTop = $('.table-container').scrollTop();
    $('thead th').css('left', scrollLeft);
    $('tbody td:first-child').css('top', scrollTop);
  });
});