实现表格列宽拖动需：1.为每列右侧添加可拖动手柄；2.监听鼠标事件并动态调整本列与右邻列宽度；3.限制最小列宽、清理事件监听、节流更新；4.兼容colgroup、响应式存储及触摸支持。
实现表格列宽拖动调整，核心是监听鼠标在列边框上的按下、移动和释放事件，动态修改对应列的 width 样式（或 col 元素宽度），同时需处理好事件绑定、坐标计算、防抖/边界限制和样式同步等细节。
1. 准备可拖动的列分隔线
为每列（除最后一列）右侧添加一个窄竖条作为拖动手柄。推荐用伪元素或绝对定位的 <div> 实现，避免破坏表格结构：
- 给
th或td设置position: relative - 在每个单元格右侧插入一个
resizer元素（如<div class="resizer"></div>），宽约 4–6px，背景透明或浅灰，cursor: col-resize - 用 CSS 确保它垂直居中、高度撑满行高，且不响应文本选中：
user-select: none
2. 绑定鼠标事件并计算列宽变化
当鼠标在 resizer 上按下时，记录初始鼠标位置和当前列（及下一列）的原始宽度，进入拖动状态：
- 监听
mousedown：获取当前列索引，保存table.clientWidth、本列offsetWidth、右邻列offsetWidth，以及鼠标clientX - 监听
mousemove（绑定到document）：计算鼠标横向位移deltaX = currentX - startX；将该增量加到本列宽度，从右邻列减去等量宽度（保证总宽不变） - 设置列宽时优先操作
<col>（若存在）或直接设th.style.width/td.style.width，避免影响table-layout: fixed表格的渲染一致性
3. 处理边界与稳定性
防止列宽过小导致内容挤压，或拖动过快丢失事件：
立即学习“Java免费学习笔记（深入）”；
- 设定最小列宽（如
50px），每次更新前校验：newWidth = Math.max(minWidth, oldWidth + deltaX) - 拖动结束（
mouseup或mouseleave）时清理document上的mousemove/mouseup监听器，避免内存泄漏 - 可加简单节流（如
requestAnimationFrame包裹 width 更新），提升滚动或快速拖动时的流畅度
4. 兼容性与进阶建议
现代浏览器基本支持，但要注意：
- 若用
colgroup+<col>，需确保其width属性可被 JS 修改（部分旧版 Safari 对内联width支持更稳） - 响应式场景下，建议拖动后将宽度存入
localStorage或 dataset，页面刷新后恢复 - 如需支持触摸设备，额外监听
touchstart/touchmove/touchend，并将clientX替换为touches[0].clientX
不复杂但容易忽略关键细节：手柄必须脱离表格单元格文档流（否则会影响 colspan 渲染）、拖动中禁用默认文本选择、宽度更新后及时触发 resize 事件供其他逻辑响应。
