<col>是替换元素，不生成盒模型，background-color在规范层面无效；应通过JS获取列号，用th/td:nth-child(n)批量添加高亮类实现稳定列高亮。
colgroup加background-color为什么没反应
因为<col>是替换元素，不生成盒模型，background-color在规范层面就不该生效——Firefox 完全忽略，Chrome/Safari 偶尔“看起来”有效，实为渲染引擎透传错误，不可依赖。你写<col class="highlight">或style="background: yellow"，DevTools 里能看到属性存在，但视觉上就是没变化。
真正能稳定高亮整列的写法
核心是放弃让<col>渲染，改用 JS 记录点击列号，再批量操作对应列的所有<th>和<td>：
- 监听
<th>点击，用Array.from(th.parentNode.children).indexOf(th) + 1算出列序号n - 执行
document.querySelectorAll('th:nth-child(' + n + '), td:nth-child(' + n + ')')选中整列单元格 - 统一添加/切换
col-highlight类，CSS 写.col-highlight { background-color: #ffeb3b !important; } - 务必加
!important，否则容易被行内style或更具体的规则覆盖
colgroup还能怎么用（别当样式工具）
<colgroup>的价值不在视觉，而在结构标记和 JS 控制：
- 用
<col id="col-name" span="1">标记逻辑列，JS 读取document.querySelector('#col-name').span获取范围 -
span只影响列布局计算，不广播样式；想三列同宽，必须写三个独立<col width="120">，不能靠span="3" -
<colgroup>必须是<table>的直接子元素，且位置严格：在<caption>之后、<thead>之前，放错就静默失效 - 动态表格时，
<colgroup>的<col>数量必须与第一行<tr>的单元格数完全一致，差一个，后续列样式就漂移
nth-child(n)写法最容易踩的坑
不是所有:nth-child()都可靠：
立即学习“前端免费学习笔记（深入）”；
- 必须用
:nth-child()，不是:nth-of-type()——因为<th>和<td>是不同标签，序列会断掉 - 写
th:nth-child(2), td:nth-child(2)才对；写th:nth-child(2), td:nth-child(2)漏掉<th>就只高亮数据行 - 如果某行有
colspan="2"，:nth-child()仍按物理列数计数，这是正常行为，不是 bug - 样式最终由
<th>/<td>渲染，哪怕<col>写了background，只要单元格自身有style="background: white"，高亮就立刻被盖掉
<colgroup>结构、:nth-child()选择器、JS 算列号逻辑，三处都要同步更新，稍有遗漏就全乱。 
