<col width="..."> 在 HTML5 中已被废弃，现代浏览器完全忽略；唯一可靠方式是 <col style="width: ..."> 或 CSS 类，且必须配合 table-layout: fixed 和正确 <colgroup> 位置。
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> 必须放对位置才能被识别
浏览器只认 <table> 的**直接子元素**中、<caption>（如有）之后、<thead> 或第一行 <tr> 之前的 <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%">或width: 800px -
width值必须明确：百分比需父容器有宽；像素值最稳妥 - 某列漏写
<col>→ 该列可能塌缩为0px（Safari 尤其明显），建议显式写<col style="width: auto">或最小值 - 首行
<th>/<td>若设了width，会覆盖<col>设置，所以第一行别乱加内联 width
span 不是批量设宽，只占位不广播样式
<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> 的位置和 table-layout: fixed 的绑定关系——它们不是“可选增强”，而是列宽精准控制的两个必要前提。少一个，<col> 的 CSS 就只是挂在 DOM 上的装饰品。
