<col> width属性常失效，因table默认为auto布局，需先设table-layout: fixed，再通过<col>或首行单元格设宽才生效；<col>支持px/%但不支持fr/calc()，且需置于<thead>前、首行必须有内容。
HTML 表格中 <col> 的 width 属性为什么经常不生效
直接写 <col width="120"> 很可能没反应，尤其在现代浏览器里。根本原因是：CSS 的层叠规则和表格渲染机制会覆盖它——只要存在任何更具体的 CSS（比如 td { width: 100px } 或 table { table-layout: auto }），<col> 的 width 就会被忽略。
真正起效的前提是：table 必须显式设置 table-layout: fixed，且 <col> 的 width 值要能被浏览器解析为明确像素或百分比（不能是 auto 或无单位数字）。
-
table-layout: fixed让浏览器按列定义宽度分配空间，否则按内容自适应（auto模式） -
<col width="120">是 HTML 属性，等价于width: 120px；但写成width="120px"反而不合法（HTML 规范不允许带单位） - 如果用了
colgroup，必须确保<col>标签顺序与实际列一一对应，缺一不可
用 <col> + table-layout: fixed 精确控制第 3 列宽度的最小可行写法
这是最简、最可靠的操作路径，绕过所有常见干扰：
<table style="table-layout: fixed; width: 100%;">
<colgroup>
<col>
<col>
<col width="150">
<col>
</colgroup>
<thead>
<tr><th>A</th><th>B</th><th>C</th><th>D</th></tr>
</thead>
<tbody>
<tr><td>x</td><td>y</td><td>z</td><td>w</td></tr>
</tbody>
</table>
- 第 3 个
<col>对应第 3 列，width="150"强制其为 150px -
table必须有明确宽度（如width: 100%或width: 600px），否则fixed模式无法计算剩余列宽 - 其他列未设
width，浏览器会均分剩余空间（不是自动收缩）
用 CSS 替代 <col> 设置列宽更灵活，但要注意选择器优先级
纯 CSS 方案更可控，尤其适合动态列或响应式场景。关键是用 col 元素配合属性选择器或 nth-child 定位：
table {
table-layout: fixed;
width: 100%;
}
col:nth-child(3) {
width: 180px;
}
- 必须搭配
table-layout: fixed，否则无效 -
col:nth-child(3)比td:nth-child(3)更高效——后者需遍历每行，前者只作用于列定义 - 如果表格有
colgroup，CSS 的col选择器仍可匹配，但优先级低于内联width属性 - 百分比值（如
width: 20%）在fixed模式下也有效，但总和不强制为 100%
容易被忽略的兼容性细节和调试技巧
即使写对了，也可能因隐藏因素失效。遇到“列宽不变”，优先检查这些点：
- 父容器（如
div）设置了overflow: hidden或max-width，导致表格被压缩，列宽被二次挤压 - 单元格内含
white-space: nowrap或长单词（如 URL），会撑开列宽，覆盖<col>设定 - 使用了
border-collapse: collapse时，边框宽度会计入列宽，建议统一用box-sizing: border-box - 在 Chrome DevTools 中，右键检查
<col>元素——它没有盒模型，所以不会显示尺寸；真正要看的是td的 computedwidth是否符合预期
列宽控制本质是浏览器渲染层的妥协结果，<col> 不是绝对指令，而是提示。真要 100% 确保某列不缩放，还得靠 min-width + max-width 组合封死弹性空间。
