直接修改 无效是因为 table-layout: fixed 下该属性被忽略，必须通过 th.style.width 和同列 td.style.width 实时更新，并同步调整 table.style.width 才能生效。
为什么直接改 <col width="200"> 没反应
因为 <col> 的 width 属性只在 table-layout: auto 下作为弱建议起效，在更常用的 table-layout: fixed 下完全被忽略。你拖拽时改了 <col width="180">，但浏览器根本不会重绘——不是 JS 写错了，是 CSS 布局模式压倒了它。
真正能触发视觉更新的是 <th> 或 <code><td> 的 <code>style.width。必须让单元格“动起来”，<col> 只能当数据快照用，比如存档或传给后端。
-
<col>没盒模型，offsetWidth永远是 0，不能绑mousedown - 给
<col>加cursor: col-resize无效，它不可见也不响应鼠标 - 拖拽结束只写
colEl.setAttribute('width', '160')，却不改th.style.width，页面毫无变化
怎么判断鼠标正处在列右边缘可拖拽区域
不能靠 hover 或 class 切换，得实时算坐标。每列 <th> 的右边缘位置 = <code>this.offsetLeft + this.offsetWidth，鼠标 clientX 距离它 ≤ 5px 才激活拖拽。
- 只对
thead tr:first-child th绑onmousedown，避免内容行干扰 - 用
event.offsetX判断是否靠近右边缘：if (event.offsetX > this.offsetWidth - 5) - IE 中
offsetX不可靠，降级用event.clientX - this.getBoundingClientRect().left - 伪元素
::after画个 5px 宽的透明手柄，position: absolute; right: 0; top: 0; height: 100%; width: 5px;
拖拽中如何安全更新宽度并防错位
核心是：只改当前 <th> 和同列所有 <code><td> 的 <code>style.width，同时微调 <table> 总宽，否则列会挤/撑开、文字换行、边框错位。<ul>
<li>记录初始 <code>startWidth = this.offsetWidth 和 startX = event.clientX
document.onmousemove 里算偏移：delta = event.clientX - startX，新宽 = Math.max(50, startWidth + delta)
currentTh.style.width = newWidth + 'px'，再遍历同列所有 td 同步设宽tableEl.style.width：原总宽 + delta，防止表格整体缩放失衡setAttribute('width', ...)，HTML 属性优先级低于 style，容易冲突松手后列宽“弹回去”或拖出表格失效怎么办
常见原因是 mouseup 没绑定到 document 上，鼠标一拖出 <table> 区域，事件就丢了；或者没清理全局 <code>mousemove 监听，导致后续操作被误触发。
-
document.onmouseup必须在mousedown时注册，且确保只注册一次（避免重复绑定） - 松手后立刻设
isResizing = false，并清除document.onmousemove = null或用removeEventListener - 如果用了
table-layout: fixed且存在<colgroup></colgroup>，记得拖拽结束时同步更新对应<col>的width属性，仅作状态镜像 - 移动端要用
touchstart/touchmove/touchend替代，取event.touches[0].clientX
拖拽列宽看着简单，实际卡点全在坐标计算精度、事件绑定范围、布局模式适配这三块。最容易被忽略的是：同一列所有 <td> 必须统一设宽，漏掉一个就会错位；还有 <code>table.style.width 不同步调，拖完发现整张表变窄了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
