在 html5 中已被废弃，现代浏览器完全忽略；唯一可靠方式是 或 css 类，且必须配合 table-layout: fixed 和正确 位置。
width 属性在 <col> 上已彻底失效，不是兼容性问题，是 HTML5 标准移除。所有现代浏览器（Chrome、Firefox、Safari）静默忽略 <col width="120"> —— DevTools 里看不到 computed width，写了也白写。
为什么 <col width="..."> 不生效
这不是你漏写了分号或引号，而是规范层面的废弃：HTML5 将 width 标记为 obsolete，解析器直接跳过该属性。即使 DOM 中存在该属性，CSS 渲染引擎根本不会读取它。
-
<col width="120">→ ❌ 完全无效，仅作历史兼容残留，不可用于生产环境 -
<col style="width: 120px">→ ✅ 唯一可靠路径 -
<col class="w-120">+.w-120 { width: 120px; }→ ✅ 更推荐，利于主题切换和批量维护
<colgroup></colgroup> 必须放对位置才能被识别
浏览器只认 <table> 的**直接子元素**中、<code><caption></caption>（如有）之后、<thead> 或第一行 <code><tr> 之前的 <code><colgroup></colgroup>。放错位置不会报错，但整段结构被解析器丢弃，DevTools 里根本看不到 <col> 的样式效果。
- ✅ 正确顺序：
<table> <caption>...</caption> <colgroup><col></colgroup> <thead>...</thead> </table> - ❌ 错例：
<tbody><colgroup></colgroup></tbody>→ 静默失效 - ❌ 错例：
<table><tr><colgroup></colgroup></tr></table>→ 结构非法，被丢弃
table-layout: fixed 是列宽可控的硬开关
没加这个，<col style="width: 100px"> 只是“建议值”，浏览器仍会扫描所有单元格内容长度，重新分配列宽——哪怕你给每列都写了 width: 100px，一个长 URL 或未换行文本照样撑开整列。
- 必须显式设置：
<table style="table-layout: fixed; width: 100%"> 或 <code>width: 800px -
width值必须明确：百分比需父容器有宽；像素值最稳妥 - 某列漏写
<col>→ 该列可能塌缩为0px（Safari 尤其明显），建议显式写<col style="width: auto">或最小值 - 首行
<th>/</th> <td> 若设了 <code>width，会覆盖<col>设置，所以第一行别乱加内联 widthspan不是批量设宽，只占位不广播样式<col style="width: 100px" span="3">不会让三列各得 100px，它只让第 1 列宽 100px，第 2、3 列回归默认行为（内容撑开或由后续<col>控制）。这不是 bug，是规范定义。- 想三列等宽 100px？写三个：
<col style="width: 100px"> <col style="width: 100px"> <col style="width: 100px"> - 想三列共占 300px？用
<col span="3" style="width: 300px">，但第 2、3 列宽度不可控 -
span真正有用的地方是语义分组，比如<col span="2" id="user-cols">，再配合th:nth-child(-n+2)批量加背景或边框
最容易被忽略的点，其实是
<colgroup></colgroup>的位置和table-layout: fixed的绑定关系——它们不是“可选增强”，而是列宽精准控制的两个必要前提。少一个，<col>的 CSS 就只是挂在 DOM 上的装饰品。 - 想三列等宽 100px？写三个：
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
