col 的 width 属性已废弃，必须用 css 设置；span 仅作用于首列，多列需显式声明多个 col；table-layout: fixed 是列宽可控前提，且 colgroup 必须为 table 直接子元素。
col 的 width 属性已废弃，必须用 CSS
直接写 <col width="120"> 不会生效，HTML5 已移除此属性，浏览器静默忽略。所有宽度控制必须通过 CSS 的 width 值实现，且只能在 <col> 的 style 或 class 中设置：
-
<col style="width: 120px">✅ 现代浏览器全支持 -
<col class="w-120">+.w-120 { width: 120px }✅ 推荐，利于复用和维护 -
<col width="120">❌ 废弃，不要用
span="N" 不是“广播宽度”，只占位首列
span="3" 表示该 <col> 占据接下来的 3 列位置，但它的样式（如 width）**仅作用于第一列**，后两列不会继承。常见误解写法：<col style="width: 100px" span="3"> 实际只让第 1 列宽 100px，第 2、3 列回退为内容撑开或浏览器自动分配。
- 想让前三列都固定 100px：必须显式写三个
<col style="width: 100px"> - 想让前三列共占 300px：可用
<col span="3" style="width: 300px">，但需配合table-layout: fixed才稳定 - 动态列数时，
span极易错位——少一个<col>，最后一列就失去控制；多一个，多余项完全无用
table-layout: fixed 是列宽可控的前提
默认 table-layout: auto 下，<col> 的 width 只是参考值，长文本照样撑开列宽。真要锁定列宽，必须启用 table-layout: fixed，且 <table> 必须有明确宽度（<code>100% 或具体像素）：
<table style="table-layout: fixed; width: 100%"> ✅ 百分比有效 <li><code><table style="table-layout: fixed; width: 800px"> ✅ 固定宽度更稳妥 <li>漏设 <code>width→ 百分比width失效；漏设table-layout: fixed→ 列宽由内容决定- 启用
table-layout: fixed后，某列漏写<col>→ 该列宽度可能为 0（Safari 尤其明显） - ❌ 错误：
<table><tbody><colgroup>...</colgroup></tbody></table>或<table><tr><colgroup>...</colgroup></tr></table> - 调试时先检查 Elements 面板中
<colgroup></colgroup>是否出现在<table> 下第一层 真正难搞的不是语法怎么写，而是列数变化时如何让 <code><col>数量和实际<th>/<code><td> 列数严格对齐；差一个，样式就断在最后一列。</td>
colgroup 必须是 table 的直接子元素，位置错就等于没写
<colgroup></colgroup> 必须紧接在 <table> 开始标签之后，且顺序严格：可在 <code><caption></caption> 之后、<thead> 之前，但绝不能嵌套在 <code><tbody>、<code><tr> 或其他标签内。放错位置不会报错，DevTools 里也看不到效果——浏览器直接跳过解析。
<ul>
<li>✅ 正确：<code><table>
<caption>...</caption>
<colgroup>...</colgroup>
<thead>...</thead>
</table>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
