如何在可滚动的div中冻结html表的第一列和最后一列？

<div class="table-wrapper">
  <div class="table-scroll">
   <table>
     <thead>
        <tr>
          <th>Header 1</th>
          <th>Header 2</th>
          <th>Header 3</th>
          <th>Header 4</th>
        </tr>
      </thead>
     <tbody>
        <tr>
          <td>Row 1, Cell 1</td>
          <td>Row 1, Cell 2</td>
          <td>Row 1, Cell 3</td>
          <td>Row 1, Cell 4</td>
        </tr>
        <tr>
          <td>Row 2, Cell 1</td>
          <td>Row 2, Cell 2</td>
          <td>Row 2, Cell 3</td>
          <td>Row 2, Cell 4</td>
        </tr>
        <tr>
          <td>Row 3, Cell 1</td>
          <td>Row 3, Cell 2</td>
          <td>Row 3, Cell 3</td>
          <td>Row 3, Cell 4</td>
        </tr>
        <tr>
          <td>Row 4, Cell 1</td>
          <td>Row 4, Cell 2</td>
          <td>Row 4, Cell 3</td>
          <td>Row 4, Cell 4</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

.table-wrapper {
  position: relative;
  overflow: auto;
}

.table-scroll {
  position: relative;
  width: 100%;
  overflow: auto;
}

.table-scroll table {
  width: 100%;
  min-width: 1200px;
  border-collapse: separate;
  border-spacing: 0;
}

.table-scroll th,
.table-scroll td {
  padding: 5px 10px;
  border: 1px solid #ccc;
  background-color: #fff;
  vertical-align: top;
}

.table-scroll thead th {
  position: sticky;
  top: 0;
  background-color: #f0f0f0;
  z-index: 1;
}

.table-scroll tfoot td {
  position: sticky;
  bottom: 0;
  background-color: #f0f0f0;
  z-index: 1;
}

.table-scroll tbody td:first-child,
.table-scroll thead th:first-child {
  position: sticky;
  left: 0;
  background-color: #f0f0f0;
  z-index: 1;
}

.table-scroll tbody td:last-child,
.table-scroll thead th:last-child {
  position: sticky;
  right: 0;
  background-color: #f0f0f0;
  z-index: 1;
}