colgroup的span属性仅声明列跨度，不支持设置背景色；真正生效的列样式必须通过td/th元素或:nth-child()伪类实现，且需同时匹配td和th以避免漏样式。
colgroup 的 span 属性本身不能设置背景色
colgroup 和 col 元素在 HTML 中只接受有限的样式属性，background-color 不在其中（浏览器会忽略）。你看到的“给列加底色”，实际必须靠 td/th 元素或 CSS 伪类（如 :nth-child()）来实现。span 只是声明“这个 col 代表接下来多少列”，不承载样式能力。
用 :nth-child() 精准匹配多列并上色
这是最直接、可控的方式。假设你想给第 2、3、5 列统一加底色，不能写成 span="3" 再设背景——得分别命中：
- 第 2 列 →
td:nth-child(2), th:nth-child(2) - 第 3 列 →
td:nth-child(3), th:nth-child(3) - 第 5 列 →
td:nth-child(5), th:nth-child(5)
合并写法：
td:nth-child(2), th:nth-child(2),<br>td:nth-child(3), th:nth-child(3),<br>td:nth-child(5), th:nth-child(5) {<br> background-color: #f0f8ff;<br>}注意：必须同时写 td 和 th，否则表头或数据行会漏样式。
用 colgroup + class 配合 JS 动态加 class 到单元格
如果列范围不固定（比如后端返回列索引数组 [1, 4, 6]），纯 CSS 写死 nth-child 不够灵活。这时可以利用 colgroup 的结构做标记：
立即学习“前端免费学习笔记（深入）”；
- 给对应
col加 class，如<col class="highlight-col" span="1"> - 用 JS 获取所有
col.highlight-col，读取其span值和位置，算出影响哪些列号 - 遍历所有
tr，对每行的td/th按列号加 class，再用 CSS 控制背景
关键点：CSS 不能直接作用于 col 的背景，但可以用它当“元数据容器”驱动 JS 行为。
容易踩的坑：colgroup 位置和 rowspan/colspan 的干扰
如果表格里有 rowspan 或 colspan，:nth-child(n) 的列序号会按 HTML 结构计算，不是按视觉列对齐的。例如：
- 第一行：
<td colspan="2">A</td><td>B</td>→ 实际占 3 列，但第二列B是:nth-child(3) - 第二行：
<td>X</td><td>Y</td><td>Z</td>→X是:nth-child(1)，Y是:nth-child(2)，但视觉上可能错位
这种情况下，仅靠 :nth-child() 无法保证“同一视觉列”被统一着色，必须结合 JS 计算实际渲染列偏移，或改用 CSS Grid 替代 table 布局。
