如何在HTML会话中临时调整含文本输入框的表格列宽？

没问题，我给你一套纯JavaScript的实现方案，不需要依赖任何第三方框架，完全满足你“会话内可调宽、刷新后丢失设置”的需求～

核心实现思路 #

• 给每列的表头（th元素）添加一个拖动手柄，作为用户调整列宽的交互入口
• 监听鼠标的mousedown、mousemove、mouseup事件，实时计算拖动距离并修改对应列的宽度
• 因为不需要持久化设置，所有状态只在当前页面会话中生效，刷新后自动重置

完整代码示例 #

1. HTML结构（带拖动手柄的表格） #

<table id="editable-table">
  <thead>
    <tr>
      <th>
        用户名
        <span class="resizer"></span>
      </th>
      <th>
        邮箱
        <span class="resizer"></span>
      </th>
      <th>
        手机号
        <span class="resizer"></span>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="text" value="张三" class="form-input"></td>
      <td><input type="text" value="zhangsan@example.com" class="form-input"></td>
      <td><input type="text" value="13800138000" class="form-input"></td>
    </tr>
    <!-- 更多行... -->
  </tbody>
</table>

2. CSS样式（美化拖动手柄） #

#editable-table {
  border-collapse: collapse;
  width: 100%;
  /* 保持表格默认适配输入框的特性 */
  table-layout: auto;
}

#editable-table th, #editable-table td {
  border: 1px solid #ddd;
  padding: 8px;
  position: relative;
}

/* 拖动手柄样式 */
.resizer {
  position: absolute;
  top: 0;
  right: 0;
  width: 5px;
  height: 100%;
  background-color: transparent;
  cursor: col-resize;
}

/* hover时高亮手柄，提升交互感知 */
.resizer:hover {
  background-color: #ccc;
}

.form-input {
  width: 100%;
  box-sizing: border-box;
  padding: 4px;
}

3. JavaScript逻辑（实现拖动功能） #

document.addEventListener('DOMContentLoaded', function() {
  const table = document.getElementById('editable-table');
  const resizers = table.querySelectorAll('.resizer');

  resizers.forEach(resizer => {
    resizer.addEventListener('mousedown', function(e) {
      // 阻止事件冒泡，避免触发表格其他点击事件
      e.preventDefault();
      
      const th = this.parentElement;
      const startX = e.clientX;
      const startWidth = th.offsetWidth;

      // 鼠标移动时调整列宽
      function handleMouseMove(e) {
        const deltaX = e.clientX - startX;
        th.style.width = `${startWidth + deltaX}px`;
      }

      // 鼠标松开时停止监听
      function handleMouseUp() {
        document.removeEventListener('mousemove', handleMouseMove);
        document.removeEventListener('mouseup', handleMouseUp);
      }

      // 添加全局监听（因为鼠标可能移出th区域）
      document.addEventListener('mousemove', handleMouseMove);
      document.addEventListener('mouseup', handleMouseUp);
    });
  });
});

关键细节说明 #

1. 拖动范围：我们给每个表头的右侧添加了5px宽的手柄区域，用户只需拖动这个区域就能调整列宽
2. 事件处理：鼠标按下时记录初始位置和列宽，移动时计算偏移量并实时修改列宽，松开时移除监听避免内存泄漏
3. 样式兼容性：手柄默认透明，hover时显示灰色，既不影响原有布局，又能让用户感知到可交互
4. 输入框适配：输入框设置了width:100%和box-sizing:border-box，会自动跟随列宽变化，不需要额外调整

这个方案完全符合你的需求，而且代码轻量、易集成，刷新页面后所有列宽设置会自动恢复到初始状态～

内容的提问来源于stack exchange，提问作者Paul Taylor