纯HTML+JS实现表格列拖拽调整顺序的核心是精确计算鼠标与列右边缘的距离（≤5px才激活），实时更新style.width和table总宽，并将mouseup绑定到document上防止拖出区域失效。
纯 HTML + JS 实现表格列拖拽调整顺序，核心不是“让列可拖”，而是精确控制鼠标在列右边缘的落点，并实时更新 style.width 和表格整体宽度。只加 draggable="true" 完全没用，浏览器根本不响应列宽调整。
怎么判断鼠标正在拖动列边框
不能靠 hover 或 class 切换，必须实时算坐标。每列 th 或 td 的右边缘位置 = this.offsetLeft + this.offsetWidth，鼠标 X 坐标离它 ≤ 5px 才激活拖拽状态。
- 只对表头行绑定
onmousedown：thead tr:first-child th，避免内容行干扰 - 在事件回调里用
event.offsetX比较：if (event.offsetX > this.offsetWidth - 5)才设isResizing = true - IE 中
offsetX不可靠，降级用event.clientX - this.getBoundingClientRect().left - 必须记录当前列
currentCol = this和初始宽度startWidth = this.offsetWidth，否则松手后无法计算偏移
拖拽中如何安全更新列宽
直接改 style.width 最稳，不碰 colgroup 或 table-layout: fixed 的底层逻辑，避免重排错乱。但单列变宽后，表格总宽可能失衡，必须同步调整 table.style.width。
- 在
document.onmousemove里计算偏移量：delta = event.x - startX，新宽度 =Math.max(50, startWidth + delta) - 给
currentCol设style.width = newWidth + 'px'，同时设table.style.width = originalTableWidth + delta + 'px' - 别用
setAttribute('width', ...)，它写进 HTML 属性，优先级低于style，容易冲突 - 如果用了
table-layout: fixed，且存在<col>，必须同步更新对应<col>的width属性，否则样式不生效
为什么松手后列宽又弹回去了
最常见原因是 mouseup 没绑定到 document 上——鼠标快速拖出表格区域时，table.onmouseup 根本不会触发，导致拖拽状态残留、后续逻辑失效。
立即学习“前端免费学习笔记（深入）”；
-
document.onmouseup必须在mousedown时注册，且确保只注册一次（避免重复绑定） - 松手后立刻设
isResizing = false，并清除document.onmousemove引用（设为null或用removeEventListener） - 移动端不支持
mousemove，需额外监听touchmove，用event.touches[0].clientX替代event.x - 别忘了给
th加user-select: none，否则拖拽时可能意外选中文本，干扰体验
列拖拽真正难的不是“动起来”，而是坐标计算精度、松手时机捕获、以及 table-layout 和 colgroup 的隐式约束——这些地方一漏，宽度就飘，而且很难复现。
