colgroup的span属性用于声明该col元素影响后续多少列的样式与宽度，不改变表格结构；其值须为正整数，所有col的span总和应等于表格实际列数，否则浏览器行为不一致。
colgroup里用span属性到底起什么作用
colgroup 的 span 属性不是“跨列”，而是“声明接下来多少列由这个col定义”。它只影响样式和宽度分配，不改变单元格结构或语义。很多人误以为设了 span="3" 就能合并表头，其实完全不能——那是 colspan 干的事。
典型错误现象：<colgroup><col span="2" width="100"></colgroup> 看起来像设了两列宽 100px，但实际可能只生效一列，或宽度被后续列覆盖——因为没配对的 col 元素数量和 span 总和必须严格等于表格总列数。
-
span值必须是正整数，不能为 0 或负数，否则被浏览器忽略 - 如果
colgroup中所有col的span加起来 ≠ 表格实际列数，浏览器会自动补缺（但行为不一致：Chrome 补空col，Firefox 可能忽略多余col） - 带
span的col不能同时写width和style，否则 CSS 优先级可能覆盖内联 width
colgroup + col + span 配合 table 的真实列数怎么对齐
最稳妥的做法：先数清 table 中任意一行（通常是第一行 tr）的单元格数，包括所有 th/td 和它们的 colspan 值。比如 <tr>
<th colspan="2">A</th>
<td>B</td>
</tr> 实际占 3 列。
然后让 colgroup 内所有 col 的 span 值加起来等于这个总数。例如 3 列可写：
<colgroup> <col span="2"> <col> </colgroup>
或者更明确地：
<colgroup> <col width="120"> <col width="120"> <col width="80"> </colgroup>
- 两种写法都合法，但前者省代码，后者更可控；混用时注意顺序必须和表格列顺序严格一致
- 如果某列有
colspan="3"，它仍只算作“逻辑上占 3 列”，不影响colgroup的列计数规则 - 动态生成表格时，务必在渲染
colgroup前完成列数计算，否则宽度错位很难调试
span 设了但列宽没生效？常见干扰项
即使 colgroup 列数对了、span 也写了，列宽仍可能失效——多数是因为 CSS 或内容撑开覆盖了设置。
- 表格默认
table-layout: auto，此时col的width仅作参考，内容长就撑开；必须显式设table-layout: fixed才强制按col宽度分配 -
td/th上写了min-width或white-space: nowrap，会顶掉col的宽度约束 - 父容器宽度不足，导致浏览器重新分配列宽，此时
col的width被当作比例因子而非绝对值 - 使用
vw、%单位时，col不支持百分比（会当 0 处理），只能用px、em或无单位数字（表示相对比例）
要不要用 colgroup？什么场景下值得花这工夫
纯静态小表格不用 colgroup 没问题；但只要涉及列宽统一控制、响应式列隐藏（如用 display: none 配合 col）、或需要无障碍支持（屏幕阅读器会读取 col 的 aria-label），colgroup 就不可替代。
- 导出 Excel 或打印时，
colgroup宽度比 CSS 更稳定 - 想用 JS 动态改某几列宽？直接操作
col元素比遍历所有td快得多 - 注意：IE9+ 支持
colgroup，但老版本 Safari 对span解析有偏差，如非必要不设 >10 的大span值
真正容易被忽略的是：colgroup 必须紧贴在 table 开始后、thead 之前，插错位置（比如放 tbody 里）就完全无效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
