必须用 javascript 监听 th 的 click 事件并读取 e.target.cellindex 获取真实列号，再遍历所有 tr（含 thead/tbody/tfoot）的 cells[i] 添加/移除 class；:nth-child() 定位列需分开写 thead tr th:nth-child(n)、tbody tr td:nth-child(n) 等，且 col 元素仅支持 width、background、visibility: collapse。
点击表头选中整列，必须用 JavaScript 拿 cellIndex
原生 HTML 表格没有「点击列高亮」功能，<col> 标签本身不响应点击，也不能直接切换样式。真正可行的路径是监听 th 的 click 事件，靠 e.target.cellIndex 获取物理列号——它自动处理 colspan 和 rowspan，比靠 data-col 或 CSS 类名可靠得多。
- 只遍历
tbody里的tr？会漏掉thead中同列的th，导致表头不一起高亮 - 用
querySelectorAll('td, th')再按位置筛选？遇到colspan="2"就错位，因为 DOM 节点数 ≠ 实际列数 - 正确做法：遍历所有
tr（包括thead、tbody、tfoot），对每个tr.cells[i]添加/移除 class；cells是只读集合，跳过被colspan覆盖的“空单元格”，天然对齐视觉列
<col> 标签不能直接切换背景色，别白费劲写 style="background-color: ..."
<col> 不渲染为可视盒子，background-color 在它上面根本无效——这不是兼容性问题，是规范限制。你写 <col style="background-color: red">，浏览器既不报错也不生效，只会让你调试半天。
- 真正能用的属性只有：
width（稳定）、background（注意是 shorthand，不是background-color单独设）、visibility: collapse（隐藏整列） -
text-align在 Chrome 可能继承，在 Safari/Firefox 基本忽略，别当真 - 想实现「点击后整列变蓝」，得靠 JS 控制 class，再配合 CSS 选中对应列：比如给
tbody tr td:nth-child(2)和thead tr th:nth-child(2)同时加背景色
用 :nth-child() 定位列时，tbody 和 thead 必须分开写
td:nth-child(2) 会命中 tbody 里第 2 列的单元格，但不会影响 thead 里的 th；反过来，th:nth-child(2) 也不会选中 tbody 的 td。二者语义不同、标签不同，序列独立计算。
- 错误写法：
tr td:nth-child(2), tr th:nth-child(2)——tr th在thead里不存在，实际是thead > tr > th - 正确写法：
thead tr th:nth-child(2), tbody tr td:nth-child(2) - 如果表格有
tfoot，还得加上tfoot tr td:nth-child(2) - 千万别用
tr > td:nth-child(2)：子选择器在colspan存在时失效，因为跨列单元格会让后续td的位置偏移
动态表格里，<colgroup></colgroup> 位置和列数必须严格匹配
<colgroup></colgroup> 必须是 <table> 的直接子元素，且必须紧接在 <code><caption></caption>（如果有）之后、任何 <thead>/<code><tbody>/<code><tr> 之前。放错位置，浏览器静默忽略，DevTools 里都看不到它。
<ul><li>常见错误：Vue/React 模板里把 <code><colgroup></colgroup> 写在 <tbody> 标签下，或 SSR 渲染时被模板引擎插到 <code><tr> 后面
<li>
<code><col> 数量或 span 总和必须等于首行 tr.cells.length；差一列，最后一列样式就漂移，且无任何提示
tr，还得同步重写 <colgroup></colgroup>，否则 cellIndex 和 nth-child() 都会错位cellIndex，什么时候该信 nth-child()」——前者用于运行时交互逻辑，后者用于静态样式定位；两者都依赖列结构稳定，而这个稳定，得靠 HTML 顺序和 JS 同步维护，不是靠一个 <col> 标签就能兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
