如何实现表格列整右侧边框可拖动调整，而非仅右下角边框？

原生CSS的resize: horizontal只能在元素右下角显示拖动手柄，无法实现整列右侧边框都可拖动的效果。要达成需求，需要结合JavaScript实现自定义拖动逻辑：

实现步骤 #

• 给每个表头单元格（th）添加一个覆盖右侧边框高度的拖动手柄元素
• 通过监听鼠标事件，实时调整对应列的宽度

完整代码示例 #

HTML

<table>
  <thead>
    <tr>
      <th>
        列1
        <div class="resizer"></div>
      </th>
      <th>
        列2
        <div class="resizer"></div>
      </th>
      <th>
        列3
        <div class="resizer"></div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>内容1</td>
      <td>内容2</td>
      <td>内容3</td>
    </tr>
  </tbody>
</table>

CSS

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

th, td {
  border: 1px solid #ccc;
  padding: 8px;
  min-width: 100px;
  position: relative;
}

.resizer {
  position: absolute;
  top: 0;
  right: 0;
  width: 5px;
  height: 100%;
  background: transparent;
  cursor: col-resize;
}

.resizer:hover {
  background: #007bff;
}

JavaScript

const resizers = document.querySelectorAll('.resizer');

resizers.forEach(resizer => {
  resizer.addEventListener('mousedown', function(e) {
    e.preventDefault();
    const th = this.parentElement;
    const startX = e.pageX;
    const startWidth = th.offsetWidth;
    
    const handleMouseMove = (e) => {
      const deltaX = e.pageX - startX;
      th.style.width = `${startWidth + deltaX}px`;
    };
    
    const handleMouseUp = () => {
      document.removeEventListener('mousemove', handleMouseMove);
      document.removeEventListener('mouseup', handleMouseUp);
    };
    
    document.addEventListener('mousemove', handleMouseMove);
    document.addEventListener('mouseup', handleMouseUp);
  });
});

代码说明 #

• CSS部分：通过绝对定位将resizer元素固定在th右侧，覆盖整个单元格高度，鼠标悬停时显示蓝色边框提示可拖动
• JavaScript部分：监听拖动手柄的mousedown事件，记录初始位置和列宽；mousemove时计算鼠标偏移量，动态调整列宽；mouseup时移除事件监听，结束拖动

内容的提问来源于stack exchange，提问作者perumal N