HTML / JS -如何放大和拖动表？

<div id="table-container">
  <table>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
    </tr>
    <tr>
      <td>Cell 3</td>
      <td>Cell 4</td>
    </tr>
  </table>
</div>

#table-container {
  width: 400px;
  height: 300px;
  overflow: auto;
}

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

td {
  border: 1px solid black;
  padding: 10px;
}

var tableContainer = document.getElementById("table-container");

tableContainer.addEventListener("wheel", function(event) {
  var delta = Math.sign(event.deltaY);
  var scale = parseFloat(tableContainer.style.transform.replace("scale(", "").replace(")", "")) || 1;

  if (delta > 0) {
    scale -= 0.1;
  } else {
    scale += 0.1;
  }

  tableContainer.style.transform = "scale(" + scale + ")";
});

var isDragging = false;
var startPosition = { x: 0, y: 0 };

tableContainer.addEventListener("mousedown", function(event) {
  isDragging = true;
  startPosition.x = event.clientX - tableContainer.offsetLeft;
  startPosition.y = event.clientY - tableContainer.offsetTop;
});

tableContainer.addEventListener("mousemove", function(event) {
  if (isDragging) {
    var offsetX = event.clientX - tableContainer.offsetLeft - startPosition.x;
    var offsetY = event.clientY - tableContainer.offsetTop - startPosition.y;

    tableContainer.style.left = offsetX + "px";
    tableContainer.style.top = offsetY + "px";
  }
});

tableContainer.addEventListener("mouseup", function() {
  isDragging = false;
});