width属性常失效，因table默认为auto布局，需先设table-layout: fixed，再通过或首行单元格设宽才生效；支持px/%但不支持fr/calc()，且需置于前、首行必须有内容。
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 列宽度的最小可行写法
这是最简、最可靠的操作路径，绕过所有常见干扰：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
| A | B | C | D |
|---|---|---|---|
| x | y | z | w |
- 第 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 组合封死弹性空间。
