col 与 colgroup 的 span 语义相同但作用范围不同：col 的 span 相对于其在 colgroup 内的位置，colgroup 的 span 相对于表格总列序；二者不可混用，span 超出列数时静默截断，仅 width 属性可靠，视觉样式推荐用 :nth-child() 控制。
col 的 span 和 colgroup 的 span 本质是同一机制，但作用范围不同
col 和 colgroup 都支持 span 属性，值都是正整数，语义也一致：「从当前列开始，向右连续影响多少列」。但关键区别在于谁在“当前”、以及“当前”从哪算起。
-
col的span是相对于它自身在colgroup中的顺序位置计算的 -
colgroup的span是相对于整个表格的列序（即从第 1 列开始）计算的
比如一个 5 列表格：
<colgroup span="3"></colgroup> <colgroup> <col span="2"> </colgroup>前者声明「这个列组覆盖前 3 列」，后者中
<col span="2"> 表示「从该 col 所在列组的第 1 列起，占 2 列」——也就是第 4、5 列。
嵌套时 colgroup span 和内部 col 不能共存
这是最容易出错的点。规范明确要求：如果 colgroup 内部已包含 col 元素，则不应再给 colgroup 设置 span。
- 浏览器行为不统一：Chrome 可能忽略
colgroup的span，Firefox 可能报解析警告，旧版 IE 直接崩溃 - 实际效果不可控：例如
<colgroup span="4"><col><col span="2"></colgroup>，第二个<col span="2">本意是影响第 2、3 列，但因colgroup已声明 span="4"，结果可能错位或截断
正确的写法只有两种：
立即学习“前端免费学习笔记（深入）”；
- 纯
colgroup span="n"（无内部col），用于声明列组宽度范围 -
colgroup+ 多个col（每个可带span），用于精细控制每一段列的属性
span 不校验列总数，超出部分被静默丢弃
无论用在 col 还是 colgroup 上，span 都不会检查表格实际有多少列。
-
<col span="10">在只有 3 列的表格里，只影响第 1 列；后续 9 次“跨列”全部失效 -
<colgroup span="5"></colgroup>后面跟了<tr><td>A</td><td>B</td></tr>（仅 2 列），浏览器仍按 5 列解析结构，但样式只对前 2 列生效，后 3 列无对应单元格，CSS 无法触达
这导致两个现实问题：
- 表格动态生成时，若列数少于
span声明值，背景色、宽度等样式会“看起来没生效” - SSR 或模板引擎中，
colgroup提前渲染而tr内容异步加载，容易出现列数错配，视觉错乱
CSS 里用 :nth-child() 比依赖 span 更可靠
col 和 colgroup 的 span 本质是结构声明，不是样式执行器。尤其在现代项目中：
-
background-color、border、text-align等样式在col上兼容性差（Safari 对背景色支持弱，Firefox 不渲染col的边框） -
width是目前唯一广泛可靠的属性，其余建议改用 CSS：td:nth-child(1), th:nth-child(1) { width: 80px; } td:nth-child(2), th:nth-child(2) { background: #f0f0f0; }
真正需要 span 的场景只剩一个：声明列宽比例或固定尺寸，且必须由浏览器在布局阶段提前知晓（比如响应式表格中让第 1–2 列等宽、第 3 列撑满剩余空间）。其他所有视觉控制，:nth-child() + td/th 更可控、更易调试。
别把 span 当成样式快捷键——它只是列结构的“坐标偏移量”，坐标画歪了，后面全跟着偏。
