<col width>属性在现代浏览器中无效，因HTML5已将其废弃；正确做法是配合table-layout: fixed使用CSS的style="width:"设置列宽，或直接为<th>/<td>设置宽度。
直接用 width 属性（比如 <col width="30%">）分配列宽比例，在现代浏览器里基本无效——这不是你写错了，是 HTML5 已将该属性标记为 obsolete，Chrome、Firefox、Safari 都不再用它计算布局。
为什么 width 属性在 <col> 上不生效
HTML5 规范明确废弃了 <col> 的 width 属性。浏览器仅保留极有限的兼容解析（如打印样式），但日常渲染中完全忽略。你看到列宽没变化，不是 CSS 覆盖了，而是这个属性压根没被当作布局依据。
-
<col width="30%">或<col width="150">都不会影响实际列宽 - 即使配合
table-layout: fixed，HTML 的width属性依然无效 - 部分旧文档或 CMS 输出可能还在用，但行为不可预测，尤其在移动端或缩放后
真正起作用的列宽比例控制方式
必须用 CSS 的 width（不是 HTML 属性），且表格需启用 table-layout: fixed。这是唯一能稳定按百分比分配列宽的组合。
<table style="table-layout: fixed; width: 100%;">- 每个
<col>改用style="width: 30%;"（注意：这里是 CSS 样式，不是 HTML 属性） - 第一行的
<th>或<td>不要设宽度，否则会覆盖<col>定义 - 列宽总和不必等于 100%，浏览器会按比例重算；但设为 100% 更易预期结果
示例：
立即学习“前端免费学习笔记（深入）”；
<table style="table-layout: fixed; width: 100%;"> <col style="width: 30%;"> <col style="width: 50%;"> <col style="width: 20%;"> <thead><tr><th>A</th><th>B</th><th>C</th></tr></thead> <tbody><tr><td>x</td><td>y</td><td>z</td></tr></tbody> </table>
更简单、更可控的替代方案
如果只是要按比例分配列宽，直接给 <th> 或 <td> 设 CSS width 更直观，尤其当内容长度差异大时。
-
<th style="width: 30%;">比<col>更容易调试和维护 - 配合
table-layout: fixed可防止内容撑开列宽 - 需要最小宽度保护时，优先用
min-width而非width，避免窄屏下文字换行异常 - 复杂表头（如合并单元格、多级标题）会让
<col>失效概率陡增，此时直接控制单元格更稳
真正麻烦的地方不在怎么写，而在“以为写了就生效”——<col width> 看似语义清晰，实则是个失效开关。只要没加 table-layout: fixed 和 CSS style="width:"，就等于没设置。
