如何使用垂直滚动条调整表格中的列

<div class="table-container">
  <table>
    <thead>
      <tr>
        <th>
          <div class="resize-handle"></div>
          列1
        </th>
        <th>
          <div class="resize-handle"></div>
          列2
        </th>
        <th>
          <div class="resize-handle"></div>
          列3
        </th>
      </tr>
    </thead>
    <tbody>
      <!-- 表格内容 -->
    </tbody>
  </table>
</div>

.table-container {
  height: 300px;
  overflow: auto;
}

table {
  table-layout: fixed;
  width: 100%;
}

th {
  position: relative;
}

.resize-handle {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 10px;
  cursor: col-resize;
  background-color: #f0f0f0;
  z-index: 1;
}

th div {
  display: inline-block;
  resize: horizontal;
  overflow: hidden;
  white-space: nowrap;
}

const resizeHandles = document.querySelectorAll('.resize-handle');

resizeHandles.forEach(handle => {
  handle.addEventListener('mousedown', startResize);
});

function startResize(e) {
  const handle = e.target;
  const th = handle.parentNode;
  const table = th.closest('table');
  const colIndex = Array.from(th.parentNode.children).indexOf(th);

  const startX = e.pageX;
  const startWidth = th.offsetWidth;

  document.addEventListener('mousemove', resizeColumn);
  document.addEventListener('mouseup', stopResize);

  function resizeColumn(e) {
    const width = startWidth + (e.pageX - startX);
    th.style.width = width + 'px';

    const cells = table.querySelectorAll(`tr > *:nth-child(${colIndex + 1})`);
    cells.forEach(cell => {
      cell.style.width = width + 'px';
    });
  }

  function stopResize() {
    document.removeEventListener('mousemove', resizeColumn);
    document.removeEventListener('mouseup', stopResize);
  }
}