colgroup 设置背景色无效是因为 col 元素不渲染为可视盒子，CSS 背景属性对其无作用；必须通过 td/th 选择器（如 :nth-child(n) 或 data-col 属性）将背景应用到实际单元格上。
colgroup 设置背景色为什么无效？
直接给 <col> 或 <colgroup> 设置 background-color 不生效，是因为 <col> 元素本身不渲染为可视盒子，CSS 背景属性对其无作用。浏览器只支持通过 <col> 控制宽度、边框（部分）、对齐等继承性样式，但背景必须“透传”到实际单元格上。
用 colgroup + class 配合 td/th 选择器实现列级背景
核心思路是：用 <colgroup> 标记列结构，再通过 CSS 选择器定位对应列的单元格。关键在于利用 :nth-child(n) 或类名绑定。
- 给
<col>添加class（如class="col-highlight"），仅作语义标记，不依赖其样式 - 在 CSS 中写
td.col-highlight, th.col-highlight—— 但这需要手动给每个<td>加 class，不推荐 - 更可靠的是用列号定位：
td:nth-child(2), th:nth-child(2) { background-color: #f0f8ff; }，其中2对应第二列 - 若表格有
<thead>和<tbody>，需分别写选择器，或统一用tr > :nth-child(2)
colgroup 宽度设置会影响 nth-child 定位吗？
不会。<colgroup> 的 width 属性（如 <col width="120">）只影响布局计算，不改变 DOM 结构顺序，:nth-child(n) 始终按 HTML 中 <td> 的实际位置计数，与 <col> 数量和宽度无关。
- 确保
<colgroup>中<col>的数量与每行单元格数一致，否则列对齐可能错乱 - 如果某行用了
colspan，:nth-child(n)仍按原始列序计算，不是按视觉列位置 - 动态插入行时，只要新
<tr>内<td>数量匹配，样式自动生效
兼容性与性能注意点
:nth-child() 在 IE9+ 支持良好，但 IE8 及更早版本不支持 —— 若需兼容，只能退化为 JS 遍历或服务端生成 class。
立即学习“前端免费学习笔记（深入）”；
- 避免在大表格（>1000 行）中对每一列都写独立的
:nth-child(n)规则，CSS 解析开销会上升 - 更高效的做法是用一个通用类 + data-col 属性：
<td data-col="2">，再写[data-col="2"] { background: ... } -
<colgroup>必须紧接在<table>开始后、<thead>或第一行<tr>之前，否则被忽略
真正起作用的永远是 <td> 和 <th> 的样式，<colgroup> 只是帮你理清列意图的“说明书”，别指望它自己上色。
