colgroup 不能直接设置背景色，因其不渲染盒模型；背景色必须作用于 td/th 元素，通过 colgroup 的 span 划分列结构并配合 css 选择器（如 nth-child 或 class）精准控制对应列的单元格背景。
colgroup 本身不能直接设背景色
很多人试过给 <col> 或 <colgroup></colgroup> 加 background-color，发现完全不生效——这不是你写错了，而是 HTML 规范里明确限制：<col> 元素不渲染盒模型，background、padding、border 等视觉属性全部被忽略。
真正起作用的是 td/th 的 background + colgroup 的 span 定位
<colgroup></colgroup> 的价值在于用 span 属性批量定义列范围，让后续 <td> 和 <code><th> 能按列继承样式（比如宽度、对齐），但背景色必须落到单元格上。关键点是：要让某几列统一背景色，得靠 <code>colgroup 划分列结构 + CSS 选择器精准匹配对应列的单元格。
- 先用
<colgroup> <col span="2"> <col> </colgroup>定义前三列为“前两列一组、第三列单独” - 再用 CSS 的
:nth-child()或col:nth-child()伪类（注意：不是<col>本身，而是其影响的单元格） - 例如：给第 1–2 列加背景，写
td:nth-child(-n+2), th:nth-child(-n+2) { background: #f0f0f0; }
用 colgroup + class 比纯 nth-child 更可控
当表格有合并单元格（colspan）或动态列时，:nth-child() 容易错位。更稳的做法是给 <col> 加 class，再用属性选择器绑定单元格：
<colgroup> <col class="highlight" span="2"> <col> </colgroup><tr> <td>A</td> <td>B</td> <td>C</td> </tr>
然后写 CSS：
col.highlight ~ td,
col.highlight ~ th {
/* 这样不行 —— col 不是父元素，~ 选不到 */
}
/* 正确写法：靠 JS 或预设 class 到 tr/td 上，或者用 CSS 自定义属性传递 */
col.highlight { --bg: #e6f7ff; }
/* 然后在 td/th 中用 var(--bg) —— 但需 JS 注入或构建时处理 */
所以实际项目中，推荐直接给需要背景的列单元格加 class，<colgroup></colgroup> 只管结构和宽度：
-
<col span="2">保证前两列宽度一致 <td class="bg-highlight"> 和 <code><th class="bg-highlight"> 显式控制背景<li>避免依赖 <code>col的视觉样式，它只该干结构的事- 如果
<colgroup></colgroup>出现在<thead> 之后（比如写在 <code><tbody> 里），部分旧版 Safari 会忽略 <code>span值，导致列宽错乱 - IE11 及更早版本不支持
col上的class用于 CSS 选择器（即col.my-class无效），只能靠nth-child或 JS 动态加 class 到单元格 -
span="0"是无效值，会被当成span="1"，别这么写
IE 和旧版 Safari 对 colgroup span 的兼容细节
span 在所有现代浏览器都支持，但要注意两个坑：
跨列背景这事，本质是「用 colgroup 定义列逻辑边界，用单元格承载视觉样式」——把责任分清，就少踩一半坑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
