拖动table标题实现改变td的大小(css+js代码)

实现拖动表格标题来改变表格单元格的大小需要使用HTML、CSS和JavaScript进行组合实现。

HTML代码

首先，我们需要使用HTML创建一个表格，每个单元格都包含一个div元素，用于拖动边界。

<table>
  <thead>
    <tr>
      <th><div class="resize"></div>Header 1</th>
      <th><div class="resize"></div>Header 2</th>
      <th><div class="resize"></div>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><div></div>Content 1</td>
      <td><div></div>Content 2</td>
      <td><div></div>Content 3</td>
    </tr>
  </tbody>
</table>

注意，表头中每个th单元格都包含类名为“resize”的div元素。这将用于用户调整单元格的大小。

CSS代码

然后，我们需要使用CSS为表格和div元素设置样式。

table {
  border-collapse: collapse;
}

table, th, td {
  border: 1px solid black;
}

th {
  background-color: #eee;
  position: relative;
}

.resize {
  position: absolute;
  top: 0;
  right: -5px;
  bottom: 0;
  width: 5px;
  background-color: #ddd;
  cursor: col-resize;
}

这段代码将使表格的边框和标题边框为黑色，并且为表头的背景颜色设置了一种外观。然后，在div的样式中，我们将其定位到单元格的右侧，并设置鼠标样式为“col-resize”，以便用户知道它可以拖动。

JavaScript代码

最后，我们需要使用JavaScript来实现拖动功能。

const tableHeaders = document.querySelectorAll("th");
let currentHeader = null;
let initialX = 0;
let initialWidth = 0;

function onMouseDown(e) {
  currentHeader = e.target.parentElement;
  initialX = e.clientX;
  initialWidth = currentHeader.clientWidth;
  tableHeaders.forEach(header => {
    if (header !== currentHeader) {
      header.style.pointerEvents = "none";
    }
  });
  document.addEventListener("mousemove", onMouseMove);
  document.addEventListener("mouseup", onMouseUp);
}

function onMouseMove(e) {
  const width = initialWidth + e.clientX - initialX;
  currentHeader.style.width = `${width}px`;
}

function onMouseUp() {
  tableHeaders.forEach(header => {
    header.style.pointerEvents = "auto";
  });
  document.removeEventListener("mousemove", onMouseMove);
  document.removeEventListener("mouseup", onMouseUp);
}

tableHeaders.forEach(header => {
  header.addEventListener("mousedown", onMouseDown);
});

这段代码将为每个表头元素（即th元素）注册mousedown事件。当用户点击其中一个表头时，将设置当前表头的变量，以及记录初始鼠标水平位置和当前表头的初始宽度。除了当前表头外，我们还将其他所有表头的指针事件设为“none”，以便防止在用户拖动当前表头时，其他表头干扰。

然后，我们将注册mousemove事件，该事件将在用户拖动表头时调用。我们将计算新宽度，并将其应用于当前表头中。

最后，我们将在mouseup事件上卸载所有事件，并将其他所有表头的指针事件重置为“auto”，以恢复其默认行为。

示例：
1. 代码演示1
2. 代码演示2