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