col元素不支持background-color，因其仅作布局占位符且不参与渲染；可靠方案是用table th:nth-child(n), table td:nth-child(n)统一设置列背景。
colgroup 里写 background-color 为什么没反应
因为 <col> 元素本身不参与视觉渲染，浏览器规范明确限制它对 background-color 的支持——Chrome、Firefox、Safari 全部一致忽略该声明。这不是你漏写了单位或拼错了单词，而是 CSS 渲染模型决定的：背景必须画在实际内容容器上，而 <col> 只是布局占位符。
常见错误现象：<col style="background-color: #eee"> 在 DevTools 里能看到样式被解析，但表格里完全没颜色；或者只在某个浏览器（比如旧版 Firefox）里偶然生效，换环境就消失。
-
width一定生效，它是<col>唯一稳定支持的视觉相关属性 -
background（非background-color）在部分 Chrome 版本中可能“勉强”显示，但background-image、background-repeat等子属性全无效 - 即使
<col>上写了背景，只要任意一个<td>或<th>自带背景色，就会直接覆盖掉（且优先级更高）
真正可靠的列背景设置方式：nth-child() 必须同时命中 th 和 td
想让第 2 列整列（包括表头和所有数据行）统一浅蓝背景，不能只写 td:nth-child(2)，否则 <th> 会漏掉，表头和数据行颜色断层。
正确写法是：
立即学习“前端免费学习笔记（深入）”；
table th:nth-child(2), table td:nth-child(2) {
background-color: #eef7ff;
}
- 必须用
table前缀限定作用域，避免全局污染 - 务必同时写
th和td，否则表头/数据行背景不一致 - 如果列是最后两列（比如周六、周日），改用
th:nth-last-child(-n+2), td:nth-last-child(-n+2)，免硬编码索引 - 遇到
colspan时，nth-child()按 HTML 源码顺序计数，不是按“逻辑列”——此时序号会错乱，应改用 class 标记单元格
colgroup 的唯一合理用途：语义标记 + JS 控制 + width 统一
<colgroup> 的价值不在视觉样式，而在结构表达和脚本可读性。它能清晰告诉开发者和辅助技术“这三列属于用户信息组”，也方便 JS 通过 document.querySelector('#user-cols').span 获取列范围。
-
<colgroup>必须是<table>的直接子元素，且严格位于<caption>（如有）之后、<thead>之前；放错位置浏览器静默忽略 -
span属性只影响列数计算，不广播样式——<col width="120" span="3">不等于三列都宽 120px，实际只有第一列应用该宽度 - 真要批量控制宽度，显式写三个
<col width="120">更可控；动态渲染时，确保colgroup的<col>数量与首行tr.cells.length完全一致
容易被忽略的兼容性陷阱
很多人试过 col.highlight { background-color: red }，发现开发时 Chrome 有颜色，上线后 Safari 用户看不到——这不是 bug，是规范行为。更隐蔽的问题是：table-layout: fixed 下，若某列 <col> 没设 width，该列可能塌缩为 0 宽，连带背景区域消失；而 width: auto 在 <col> 上根本无效。
结论很直接：列背景色这件事，别碰 <col> 的 background-color。它看起来像能用，实则跨浏览器不可靠，维护成本远高于收益。把样式落到单元格上，才是生产环境里真正省心的做法。
