colgroup 的 background-color 无法可靠设置列背景色，因 col 元素不参与渲染，真正生效需作用于 td/th；推荐用 :nth-child() 或 class 控制单元格背景。
colgroup 标签本身不能可靠地给表格列添加背景色——这不是你写错了，而是浏览器实现和 CSS 规范共同决定的现实。
为什么 col 上设 background-color 没反应
Chrome、Safari 和新版 Firefox 均不渲染 col 元素的 background-color；即使某些版本显示了，换浏览器或升级后大概率失效。根本原因是：col 不参与视觉绘制，它只提供列结构元信息，真正渲染背景的是 td 和 th。
- 常见错误现象：
<col style="background-color: #eee">写了但表格里完全没颜色 - 调试时在开发者工具里能看到
col节点，但 computed 样式中background-color显示为transparent或被忽略 - 哪怕加了
table-layout: fixed或border-collapse: collapse，也救不了这个限制
真正能跨浏览器生效的列背景方案
必须把样式落到单元格上。最稳妥、最常用的是 :nth-child() 选择器，配合明确的列序号或语义化 class。
- 按位置控制第2列：
td:nth-child(2), th:nth-child(2) { background-color: #f0f8ff; } - 按倒序控制最后两列（比如周末列）：
td:nth-last-child(-n+2), th:nth-last-child(-n+2) { background-color: #ff4757; } - 用 class 更灵活：
<td class="col-salary">15000</td>，再写.col-salary { background-color: #e8f4fd; } - 如果表格列数动态生成，务必让 JS 生成的
colgroup中col数量与首行tr.cells.length严格一致，否则:nth-child()会错位
colgroup 还值得用吗？哪些属性它真能控
值得用，但只用于它真正擅长的事：列宽、列可见性、极简边框（需配合 border-collapse），以及作为 JS 操作列结构的语义锚点。
- 稳定有效的属性：
width（必须是具体值，auto无效）、visibility: collapse（隐藏整列）、span（仅影响列计数逻辑） - 慎用的属性：
background-color（兼容性差）、text-align（部分浏览器继承，不可靠） - 完全无效的属性：
color、font-size、padding、margin、border（列级边框几乎不渲染） - 关键前提：
colgroup必须是table的直接子元素，且位于caption后、thead前；col数量必须与实际列数对齐，否则后续所有列样式都会偏移
真正麻烦的不是怎么写，而是忘记 td 或 th 自身设置了背景色——它会覆盖掉你辛苦写的 :nth-child() 规则。检查时先看 computed 样式里哪个 background-color 生效了，再逆推来源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
