col标签不支持background-color，需通过colgroup定义列逻辑并用css选择器（如:nth-child或data-col属性）为对应列的td/th统一设背景色，注意border-collapse和全局背景干扰。
col 标签本身不支持 background-color
直接给 <col> 设置 background-color 无效——这是最常踩的坑。因为 <col> 是纯结构标签，浏览器不把它当作可渲染的视觉元素，CSS 背景色、边框、内边距等对它完全不起作用。
用 colgroup + tbody tr td 的组合来模拟列背景
真正生效的方式是：借助 <colgroup></colgroup> 定义列逻辑，再通过 CSS 选择器定位到对应列的单元格，统一设背景色。关键点在于利用 :nth-child(n) 或 colspan 对应的列索引。
- 如果表格结构稳定（比如第2、3列要统一背景），写
td:nth-child(2), td:nth-child(3), th:nth-child(2), th:nth-child(3) - 注意必须同时选中
th和td，否则表头无背景 - 若用了
rowspan或colspan，:nth-child可能错位，此时建议加 class 控制更稳妥
用 CSS 自定义属性 + 属性选择器提升可维护性
当列数多或需动态切换时，硬写 :nth-child 易出错。可以改用语义化 class 配合自定义属性：
<colgroup> <col class="bg-highlight" data-col="2"> <col class="bg-highlight" data-col="3"> </colgroup><tbody><tr> <td>A</td> <td>B</td> <td>C</td> </tr></tbody>
然后用 CSS 匹配：
td[data-col="2"], th[data-col="2"],
td[data-col="3"], th[data-col="3"] {
background-color: #f0f8ff;
}
注意 border-collapse 和 z-index 的干扰
如果表格设置了 border-collapse: collapse，且单元格有 border，背景色可能被边框遮盖或颜色混合；另外，背景色不会影响 <col> 上设置的 width 或 span 行为，但会影响视觉对齐感。
- 确保
table没有全局background-color覆盖掉单元格背景 - 避免在
tr上设背景色，否则会盖住td的列级背景 -
<col span="2">只是声明“这一行定义覆盖 2 列”，它本身不触发任何样式，仍需靠上面的 CSS 手动匹配两列
列背景本质是“对齐列的单元格批量上色”，不是真的给列容器着色——这点容易想当然，但绕不开。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
