最直接可控的列宽控制方式是为和设置style.width，但必须配合table{table-layout:fixed}，且同列所有单元格宽度值需一致，推荐使用像素值。

直接给 <th> 或 <code><td> 设 <code>style.width

这是最直接、最可控的方式，尤其适合动态调整或单列干预。浏览器会立即将该单元格的宽度应用到整列（前提是 table-layout: fixed 已启用）。

• 必须配合 table { table-layout: fixed; }，否则宽度可能被内容撑开或忽略
• 同一列的所有 <td> 和对应 <code><th> 都要设相同值，否则视觉错位（比如第 2 行比第 1 行窄） <li>推荐用像素值（如 <code>style="width: 180px"），百分比在嵌套容器中容易计算失准
• 别只改 <th> 而漏掉 <code><td> —— 拖拽后常见 bug 就是表头宽了，数据列还卡在默认宽度 <h3> <code><col> 标签只在 table-layout: fixed 下按像素生效

<col width="120"> 看起来简洁，但实际约束极强：它只认像素值，且仅当 table-layout: fixed 开启时才真正起作用；写 width="30%" 或 width="auto" 在 fixed 模式下会被无视。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• <col> 必须放在 <colgroup></colgroup> 内，且紧贴 <table> 开始后、<code><thead> 之前，顺序错一位就全乱 <li>修改 <code><col width> 属性本身不会触发重绘，必须同步改动某个 <th> 的 <code>style.width 才能立刻看到效果
• 它不适合拖拽场景——<col> 不响应事件，也不能被 ResizeObserver 监听，只是个“状态快照”

为什么 min-width 在 <td> 上经常失效 <p>写了 <code>td:nth-child(2) { min-width: 150px; } 却没反应？不是 CSS 写错了，而是缺少前提条件：只有 table { table-layout: fixed; } 时，min-width 才能作为底线约束生效。

• 在默认的 table-layout: auto 下，内容宽度永远优先于 min-width，哪怕只有一两个字符，整列也可能被压缩到 20px
• 即使开了 fixed，也要确保该列有显式宽度定义（来自 <col> 或首行 <th>），否则 <code>min-width 无基准可依
• 如果父容器是 flex 或设置了 overflow-x: auto，也会干扰 min-width 计算，建议外层加 wrapper 并设明确 width

拖拽调整列宽时的真实控制链路

不要试图只操作 <col>，真实生效的是单元格的 style.width。拖拽逻辑的核心是：鼠标按下时读当前 <th> 宽度，移动时同步更新该列所有 <code><th> 和 <code><td> 的 <code>style.width，结束时再把数值存回 <col> 供后续序列化。

• 监听点不能放在 <col> 上（它没事件），而应放在 <th> 右侧伪元素（<code>::after）或独立分隔线 DOM 上
• 计算新宽度时，用 getBoundingClientRect().width 比 getComputedStyle().width 更可靠，后者可能返回百分比字符串
• 避免对 <col> 设置 style.width —— 它不响应 CSS，写了等于没写
• 移动端要考虑 touch 事件替代 mouse 事件，且需处理 touch-action: none 防止页面滚动干扰
列宽控制的复杂点不在“怎么写”，而在“什么时候生效”。table-layout: fixed 是开关，<col> 是声明，style.width 是执行器——三者缺一不可，且顺序和时机稍有偏差，就会出现“改了但没变”的假象。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！