无法设置整列背景色，因其不渲染视觉样式且CSS规范禁止对应用background-color；应改用tr > th:nth-child(n), tr > td:nth-child(n)选择器作用于单元格，或为跨列场景添加class标记。
用 <colgroup></colgroup> 设置整列背景色为什么无效
因为 <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> 或 <code><th> <h3> <code>nth-child()选中表格列的正确写法表格里没有“第 n 列”的原生选择器，
nth-child(n)必须作用在行内单元格上，且需同时覆盖<th> 和 <code><td>，否则表头/数据行背景会错位。 <p>使用场景：比如想给第 3 列（索引从 1 开始）统一加浅灰背景，且要兼容表头和所有数据行。</p> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板">CSS婚礼策划服务机构宣传网站模板</a> <p>CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p> </div> <a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <ul> <li>正确选择器：<code>tr > th:nth-child(3), tr > td:nth-child(3) - 不能只写
td:nth-child(3)—— 会漏掉<th>，表头列没背景 <li>不能写 <code>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> 上，或中间某列完全没被选中 <li>根本原因：HTML 表格模型和 CSS 选择器的定位机制不匹配，<code>nth-child不理解“列跨度”语义 - 实操建议：给目标列的所有单元格手动加 class，比如
<th class="col-price"> + <code><td class="col-price">，再用 <code>.col-price { background: #f9f9f9 } - 如果列数固定且无跨列，优先用
nth-child()；一旦出现colspan，class 方案更可控 - 实际用途：用
<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; }
用 <colgroup></colgroup> 配合 CSS 的唯一可行路径
虽然 <col> 不能设背景，但它可以设 width、visibility，还能通过 border 间接影响视觉——而最关键的，是它能配合 table { border-collapse: collapse } 让列控制更稳定。
复杂点在于：表格结构越不规整（跨列、动态生成、服务端渲染），越难靠纯 CSS 安全定位列。这时候 class 或 data 属性标记才是最省心的方案。
