colgroup需作为table直接子元素且顺序严格，width属性已废弃须用css设置，span仅影响首列，动态列数需js生成对应col或改用nth-child。
colgroup 能统一控制列宽，但必须每个 col 显式声明，不能靠 span “广播”宽度 —— 否则 Chrome/Firefox/Safari 表现不一致，甚至完全失效。
colgroup 里写 width="120" 为什么没反应？
HTML5 已废弃 col 的 width 属性（如 <col width="120">），浏览器会静默忽略。必须改用 CSS 的 width 值，且只在 style 或 class 中设置：
-
<col style="width: 120px">✅ 生效（现代浏览器全支持） -
<col width="120">❌ 废弃，不生效 -
<col class="w-120">+.w-120 { width: 120px }✅ 推荐，利于复用
span="3" 能让三列都变宽吗？
不能。span="3" 只表示“这个 col 占据接下来的 3 列位置”，但它的 style 仅作用于**第一个被覆盖的列**（即该 col 对应的起始列），后两列不会继承宽度。
- 错误写法：
<col style="width: 100px" span="3">→ 实际只有第 1 列宽 100px，第 2、3 列回退为默认宽度 - 正确写法：显式写出三个
col：<col style="width: 100px"> <col style="width: 100px"> <col style="width: 100px"> - 动态表格若列数不确定，
colgroup就不适合——得用 JS 生成对应数量的col，或改用td:nth-child(n)控制
colgroup 放错位置，样式就彻底消失
colgroup 必须是 <table> 的**直接子元素**，且顺序严格：<code><caption></caption>（如有）之后、<thead> 之前。放错位置不会报错，但 DevTools 里看不到任何效果，样式被浏览器静默跳过。
<ul>
<li>✅ 正确：<code><table>
<caption>...</caption>
<colgroup>...</colgroup>
<thead>...</thead>
<tbody>...</tbody>
</table>
<tbody><colgroup>...</colgroup></tbody> 或 <tr><colgroup>...</colgroup></tr>
colgroup 是否出现在 table 下第一层 —— 不是，就立刻挪位置真正难搞的不是怎么写，而是列数动态变化时怎么保 col 数量和实际 th/td 列数严格对齐；少一个，最后一列样式就丢了；多一个，多余 col 完全无用还干扰调试。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
