<colgroup>无法设置整列背景色，因其不渲染视觉样式且CSS规范禁止对<col>应用background-color；应改用tr > th:nth-child(n), tr > td:nth-child(n)选择器作用于单元格，或为跨列场景添加class标记。
用 <colgroup> 设置整列背景色为什么无效
因为 <colgroup> 本身不渲染视觉样式，它只承载列的结构语义和部分属性（如 width、span），但 background-color 在绝大多数浏览器里对 <col> 元素不起作用——不是写法错，是 CSS 规范就限制了。
常见错误现象：<col style="background-color: #f0f0f0"> 看不到效果；用 colgroup col:nth-child(2) { background: red } 也无效。
- 根本原因：CSS 无法直接作用于
<col>的背景，浏览器忽略该声明 - 兼容性影响：Chrome、Firefox、Safari 全部一致不支持，不是 bug 是 spec 行为
- 替代思路：必须把背景“落到单元格上”，即作用于
<td>或<th>
nth-child() 选中表格列的正确写法
表格里没有“第 n 列”的原生选择器，nth-child(n) 必须作用在行内单元格上，且需同时覆盖 <th> 和 <td>，否则表头/数据行背景会错位。
使用场景：比如想给第 3 列（索引从 1 开始）统一加浅灰背景，且要兼容表头和所有数据行。
立即学习“前端免费学习笔记（深入）”；
- 正确选择器：
tr > th:nth-child(3), tr > td:nth-child(3) - 不能只写
td:nth-child(3)—— 会漏掉<th>，表头列没背景 - 不能写
table tr:nth-child(3)—— 这是选第 3 行，不是第 3 列 - 性能无压力：现代浏览器对这类选择器优化很好，无需担心重绘开销
示例：
table tr > th:nth-child(2), table tr > td:nth-child(2) { background-color: #eef7ff; }
当表格有 colspan 或 rowspan 时 nth-child() 失效怎么办
nth-child() 按 DOM 顺序数子元素位置，遇到 colspan="2" 的单元格，它占两个列位置但只算一个子元素，后续列的序号就全乱了。这时候靠纯 CSS 基本没法可靠选中“逻辑上的第 n 列”。
- 典型错误现象：第 4 列背景突然出现在第 5 个
<td>上，或中间某列完全没被选中 - 根本原因：HTML 表格模型和 CSS 选择器的定位机制不匹配，
nth-child不理解“列跨度”语义 - 实操建议：给目标列的所有单元格手动加 class，比如
<th class="col-price">+<td class="col-price">，再用.col-price { background: #f9f9f9 } - 如果列数固定且无跨列，优先用
nth-child()；一旦出现colspan，class 方案更可控
用 <colgroup> 配合 CSS 的唯一可行路径
虽然 <col> 不能设背景，但它可以设 width、visibility，还能通过 border 间接影响视觉——而最关键的，是它能配合 table { border-collapse: collapse } 让列控制更稳定。
- 实际用途：用
<col>统一列宽 +nth-child()控制背景，二者分工明确 - 必须加的 CSS：
table { border-collapse: collapse }，否则col的border可能失效，列对齐易出问题 - 容易踩的坑：在
border-collapse: separate下，<col>的border被忽略，且nth-child()选中的单元格边框可能和列边距打架 - 简短示例：
<colgroup><col><col width="120"><col></colgroup><br>table { border-collapse: collapse; }<br>tr > td:nth-child(2), tr > th:nth-child(2) { background: #f5f5f5; }
复杂点在于：表格结构越不规整（跨列、动态生成、服务端渲染），越难靠纯 CSS 安全定位列。这时候 class 或 data 属性标记才是最省心的方案。
