标签无法可靠实现点击列高亮，因其为替换元素，不生成盒模型，background-color等样式被忽略；应通过js获取列序号，用:nth-child(n)选择对应th/td添加高亮类。
直接用 <col> 标签配合 CSS 类切换实现“点击列高亮”，在绝大多数浏览器里不可靠——<col> 的样式支持极其有限，background-color 在 Firefox 中基本不生效，Chrome/Safari 也只在特定条件下“看起来”有效，本质是渲染机制缺陷，不是写法问题。
为什么给 col 加 class 或 style 后 background 不生效
因为 <col> 是替换元素（replaced element），浏览器不把它当作常规 DOM 元素渲染。它只参与列布局计算，不生成盒模型，所以 background-color、border、color 等绝大多数 CSS 属性被忽略。即使 DevTools 显示 class 已应用，视觉上也没变化。
-
<col class="highlight">→ class 存在，但.highlight { background: yellow }几乎无效 -
<col style="background: red">→ style 属性被解析，但渲染引擎不执行背景绘制 - 唯一可能“偶然生效”的场景：整列有内容、
table-layout: fixed开启、且该列所有<td> 未设背景色 —— 但 Firefox 始终不认，不能作为生产方案 <h3>真正能跨浏览器稳定实现点击列高亮的方案</h3> <p>核心思路：不依赖 <code><col>渲染，而是通过 JS 记录点击列号，再用:nth-child()选中对应列的所有单元格统一加类。- 给每列单元格打上语义标识：
<th data-col="name"> + <code><td data-col="name"> <li>或更轻量：监听 <code>th的 click 事件，用Array.from(th.parentNode.children).indexOf(th) + 1算出列序号n - 然后执行：
document.querySelectorAll('th:nth-child(' + n + '), td:nth-child(' + n + ')').forEach(el => el.classList.toggle('col-highlight')) - CSS 定义：
.col-highlight { background-color: #ffeb3b !important; }（加!important防被行内样式覆盖） - 用
<col id="col-name" span="1">标记逻辑列，方便 JS 读取：document.querySelector('#col-name').span得到列范围 - 配合
th:nth-child(-n+3)这类选择器批量控制样式 —— 但样式仍必须作用于th/td，不能指望col自己渲染 - 避免写
<col class="highlight">，这种写法徒增迷惑，删掉更干净
如果非要保留 colgroup 结构，该怎么配合使用
<colgroup></colgroup>的价值不在样式，而在语义和 JS 控制。你可以用它做两件事：记住：列高亮的本质是“对第 n 列所有单元格统一操作”，
<col>只负责宽度和无障碍语义，别让它承担它干不了的活。 - 给每列单元格打上语义标识：
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
