是替换元素，不生成盒模型，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>和<code><td>：
<ul><li>监听<code><th>点击，用<code>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></colgroup>的价值不在视觉，而在结构标记和 JS 控制：
- 用
<col id="col-name" span="1">标记逻辑列，JS 读取document.querySelector('#col-name').span获取范围 -
span只影响列布局计算，不广播样式；想三列同宽，必须写三个独立<col width="120">，不能靠span="3" -
<colgroup></colgroup>必须是<table>的直接子元素，且位置严格：在<code><caption></caption>之后、<thead>之前，放错就静默失效 <li>动态表格时，<code><colgroup></colgroup>的<col>数量必须与第一行<tr>的单元格数完全一致，差一个，后续列样式就漂移 <h3>nth-child(n)写法最容易踩的坑</h3> <p>不是所有<code>:nth-child()都可靠：- 必须用
:nth-child()，不是:nth-of-type()——因为<th>和<code><td>是不同标签，序列会断掉 <li>写<code>th:nth-child(2), td:nth-child(2)才对；写th:nth-child(2), td:nth-child(2)漏掉<th>就只高亮数据行 <li>如果某行有<code>colspan="2"，:nth-child()仍按物理列数计数，这是正常行为，不是 bug - 样式最终由
<th>/<code><td>渲染，哪怕<code><col>写了background，只要单元格自身有style="background: white"，高亮就立刻被盖掉 实际最麻烦的点不是怎么写，而是维护：列数一变，<colgroup></colgroup>结构、:nth-child()选择器、JS 算列号逻辑，三处都要同步更新，稍有遗漏就全乱。
- 必须用
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
