无法用标签可靠实现列高亮，因其background-color仅在特定条件下偶然生效，易被单元格背景覆盖；应改用th:nth-child(n), td:nth-child(n)选择器跨浏览器稳定高亮整列。
直接用 <col> 标签加 background-color 实现不了可靠的列高亮——它只在部分浏览器偶然生效，且极易被 <td> 自身背景覆盖。
<h3>为什么 <code><col> 的 background-color 经常不显示
这不是你写错了，而是浏览器渲染机制决定的：<col> 不参与内容绘制，它的 background-color 只在“列有内容撑开、且无单元格背景干扰”时才可能漏出一点。常见失效场景：
<td> 或 <code><th> 显式设置了 <code>background→ 直接覆盖<col>的背景- 表格用了
border-collapse: separate→ 列背景区域被边框间隙割裂 - Firefox 对
<col>背景支持极弱，Safari 有时只渲染首行下方区域 - 没启用
table-layout: fixed→ 列宽未固化，背景渲染上下文不稳定 - 高亮第 2 列：
th:nth-child(2), td:nth-child(2) { background-color: #fff3cd; } - 高亮第 3–5 列：
th:nth-child(n+3):nth-child(-n+5), td:nth-child(n+3):nth-child(-n+5) { background-color: #e9ecef; } - 配合 hover 动态高亮：
tr:hover td:nth-child(4), tr:hover th:nth-child(4) { background-color: #d1ecf1 !important; } - 表格含
colspan单元格 → 它会干扰:nth-child的计数，需手动跳过或改用类名标记 - 服务端渲染（SSR）中
<colgroup></colgroup>与首行<tr> 列数不匹配 → 浏览器静默忽略多余 <code><col>，但:nth-child仍按 DOM 真实结构计算最稳妥的做法：给关键列的
<th> 加 <code>data-col="user-name"，然后用[data-col="user-name"]选择器控制样式——比依赖位置序号更抗变化。
真正能稳定高亮整列的 CSS 写法
放弃依赖 <col> 的背景，改用 :nth-child() 直接选中单元格。这是唯一跨浏览器稳定的方案：
注意：:nth-of-type() 不能用——<th> 和 <code><td> 是不同标签，序列会断掉。
<h3>
<code><colgroup></colgroup> 里写 class 或 style 有用吗
写了也白写。虽然 DevTools 可能显示 class 存在，但 <col> 是替换元素（replaced element），绝大多数 CSS 属性根本不会被应用。实测无效的包括：color、font-size、padding、margin、border、text-align（Safari 基本忽略）。唯一能指望的是 width 和极有限条件下的 background-color。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
别把 <colgroup></colgroup> 当样式容器，它真正的价值是语义声明、无障碍支持，以及配合 JS 读取 span 值做列宽控制——不是用来画背景的。
动态表格下怎么避免高亮错位
当列数由 JS 或模板引擎生成时，:nth-child() 依然可靠，但必须确保首行 <tr> 的单元格数量与实际列数严格一致。常见坑点：
<ul>
<li>JS 渲染后 <code>document.querySelector('tr').cells.length 返回值 ≠ 预期列数 → :nth-child(3) 可能指向空单元格或错列
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
