纯HTML+JS实现表格列宽拖拽需三步：mousedown时判断鼠标距列右边缘≤5px则激活拖拽，mousemove中用requestAnimationFrame动态更新currentCol.style.width及table.style.width，mouseup时清除监听并重置状态；关键在坐标精确计算与防重排优化。
纯 HTML + JS 实现表格列宽拖拽，不需要 jQuery 插件，核心就三件事：监听 mousedown 判断是否在列边框触发、用 mousemove 动态改 width、mouseup 时收尾并同步表格整体宽度。关键不是“加 draggable”，而是精确控制鼠标位置与单元格右边缘的距离。
怎么判断鼠标正在拖动列边框
不能靠 hover 或 class 切换，得实时算坐标。每列 th 或 td 的右边缘 = offsetLeft + offsetWidth，鼠标 X 坐标离它 ≤ 5px 时才激活拖拽状态。
- 只对表头行（
thead tr:first-child th）绑定onmousedown，避免内容行干扰 - 在事件回调里用
event.offsetX和this.offsetWidth比较：if (event.offsetX > this.offsetWidth - 5)才设isResizing = true - 必须记录当前被拖的列（
currentCol = this）和初始宽度（startWidth = this.offsetWidth），否则松手后无法还原 - IE 中
offsetX不可靠，可降级用event.clientX - this.getBoundingClientRect().left
拖拽中如何安全更新列宽
直接改 style.width 最稳，不碰 colgroup 或 table-layout: fixed 的底层逻辑，避免重排错乱。但要注意：改单列宽后，表格总宽可能失衡，需同步调整 table.style.width。
- 在
document.onmousemove里计算偏移量：delta = event.x - startX，新宽度 =startWidth + delta - 限制最小宽度（如
Math.max(50, newWidth)），防止列缩没或文字挤成一团 - 给
currentCol设style.width = newWidth + 'px'，同时设table.style.width = originalTableWidth + delta + 'px' - 别用
setAttribute('width', ...)，它会写进 HTML 属性，优先级低于 style，容易冲突
为什么松手后列宽又弹回去了
常见原因是没清理全局 mousemove 监听，或 mouseup 没绑定到 document 上——鼠标快速拖出表格区域时，table.onmouseup 根本不会触发。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
-
document.onmouseup必须在mousedown时注册，且要确保只注册一次（避免重复绑定） - 松手后立刻设
isResizing = false，并清除document.onmousemove引用（设为null或用removeEventListener） - 如果用了
table-layout: fixed，记得检查colgroup是否存在；有colgroup时，仅改th.style.width可能无效，得同步更新对应<col>的width属性 - 移动端不支持
mousemove，需要额外处理touchmove，且event.touches[0].clientX替代event.x
兼容性与性能要注意什么
现代浏览器基本没问题，但两个细节极易被忽略：一是 Safari 对 event.offsetX 支持不稳定，二是频繁改 width 触发 layout thrashing。
- 避免在
mousemove里反复调用getBoundingClientRect()或读取offsetWidth，提前缓存初始值 - 用
requestAnimationFrame包一层 width 更新逻辑，减少重排次数 - IE11 不支持
MouseEvent.offsetX，必须 fallback 到getBoundingClientRect()计算 - 如果表格有固定表头（
position: sticky），拖拽时需同步更新 body 表格和 header 表格的对应列宽，否则视觉错位
最麻烦的其实是多行表头或 colspan 单元格——此时一列可能跨多格，th 的 offsetWidth 不代表真实列宽，得先遍历 colgroup 或用 table.columns（非标准 API）推算，这个点几乎没人提，但线上项目一碰就崩。
