colgroup标签本身不支持设置背景色，需通过col标签配合CSS的background-color实现列高亮，但Firefox不支持该样式，推荐使用:nth-child()或类名方案确保兼容性。
Colgroup 标签本身不支持直接设置背景色，它只是为表格列提供语义分组和统一属性（如宽度、对齐），但不能渲染视觉样式（包括 background-color）。真正实现多列背景色高亮，需结合 <col> 标签与 CSS 的 background-color 属性 —— 而且必须通过 col 元素的 CSS 设置，且仅在部分浏览器中生效（关键限制见下文）。
col 元素支持 background-color 的实际兼容性
根据 HTML 规范和主流浏览器行为：
- Chrome、Edge（Chromium 内核）、Safari 支持对
<col>设置background-color，效果作用于整列单元格（td/th）的背景上； - Firefox 不支持
<col>的background-color（会忽略该样式）； - 即使支持，该背景色是“底层铺垫”，会被单元格自身设置的
background覆盖（除非单元格未设背景或使用transparent）。
正确写法：用 colgroup + col + CSS 实现列高亮
HTML 结构需明确声明每列，并在 CSS 中为目标 col 设置背景：
| 姓名 | 部门 | 薪资 |
|---|---|---|
| 张三 | 技术部 | 15000 |
| 李四 | 市场部 | 12000 |
CSS 示例：
col.highlight-1 { background-color: #e8f4fd; } /* 浅蓝：姓名列 */
col.highlight-2 { background-color: #fff8e6; } /* 米黄：部门列 */
⚠️ 注意：确保 td 和 th 未设置覆盖性背景色（或显式设为 background-color: transparent）。
更可靠替代方案（推荐用于生产环境）
为保障跨浏览器一致性（尤其兼容 Firefox），建议改用以下任一方式：
-
CSS 列选择器：
td:nth-child(1), th:nth-child(1) { background-color: #e8f4fd; }—— 精准控制第1列所有单元格； -
为每列单元格添加 class：
<td class="col-name">张三</td>，再统一定义.col-name { background-color: ... }； -
使用 data-* 属性 + CSS 属性选择器：
td[data-col="name"] { background-color: ... }，兼顾语义与灵活性。
小结：colgroup 高亮的本质与取舍
<colgroup></colgroup> 是结构化工具，不是样式层。它能辅助语义化列分组、统一宽度/对齐，但视觉高亮依赖 <col> 的 CSS 背景支持 —— 这一能力存在浏览器差异。若项目需 100% 兼容，优先采用 :nth-child() 或类名方案；若仅面向现代 Chromium/Safari 用户，且列结构稳定，col + background-color 是简洁有效的选择。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
