如何调整表格字段的大小？

问：

因此，我 Asp.Net 此表中创建：

<div class="table-container">
  <table id="planningTable">
    <thead>
    <tr>
      <th>Planung</th>
      @for (int week = 1; week <= 52; week++) {
        <th>@week</th>
      }
    </tr>
    </thead>
    <tbody>
    @foreach (var projectEvent in Model.ProjectEvents) {
      <tr>
        <td>@projectEvent.Project.Name</td>
        @for (int week = 1; week <= 52; week++) {
          var eventType = projectEvent.EventValues[week - 1];
          string styleAttr = "";
          string cellClass = "";
          if (eventType.HasValue) {
            switch (eventType.Value) {
              case EventType.Sprint:
                styleAttr = "background-color: red;";
                cellClass = "sprint-cell";
                break;
              case EventType.Firefighting:
                styleAttr = "background-color: orange;";
                cellClass = "firefighting-cell";
                break;
            }
          }
          <td class="@cellClass" style="@styleAttr"></td>
        }
      </tr>
    }
    </tbody>
  </table>
</div>

它看起来像这样：

可视化示例

如您所见，我已经创建了可视化功能，即 visuel 响应用于调整此表中红色字段的大小。

我的目标是调整它的大小，例如：之前

后

以便用户可以根据需要调整字段大小

到目前为止，这是我的 js 脚本，我得到了视觉响应，但我不知道如何实际实现列的大小调整，就像我的示例中所示：

document.addEventListener("DOMContentLoaded", function () {
  const rows = document.querySelectorAll('#planningTable tbody tr');

  rows.forEach(row => {
    mergeAndEnableResizingForColoredCells(row);
  });
});

function mergeAndEnableResizingForColoredCells(row) {
  let lastColor = null;
  let mergeStart = null;
  let colspan = 0;

  row.querySelectorAll('td').forEach((cell, index) => {
    const currentColor = cell.style.backgroundColor;

    if (currentColor === lastColor && currentColor !== '') {
      colspan++;
    } else {
      finalizeMerge(mergeStart, colspan);
      colspan = 1;
      mergeStart = cell;
    }

    lastColor = currentColor;

    // Am Ende der Reihe
    if (index === row.cells.length - 1) {
      finalizeMerge(mergeStart, colspan);
    }
  });
}

function finalizeMerge(cell, colSpan) {
  if (cell && colSpan > 1) {
    cell.colSpan = colSpan;
    for (let i = 1; i < colSpan; i++) {
      cell.parentElement.deleteCell(cell.cellIndex + 1);
    }
    applyResizing(cell);
  } else if (cell && cell.style.backgroundColor !== '') {
    applyResizing(cell);
  }
}

function applyResizing(cell) {
  cell.style.resize = 'horizontal';
  cell.style.overflow = 'auto';
}

更难的是，我不能使用像 angualar 这样的东西，也不能只对 html 的东西 Asp.Net 正常反应