是唯一能从语义和结构上为整列统一配置样式的html机制，但仅支持width、text-align、border（collapse下）和visibility: collapse；background-color无效且不可靠，需用td/th:nth-child()或加class配合选择器实现列样式。
<colgroup></colgroup> 是唯一能从语义和结构上为整列统一配置样式的 HTML 机制，但它能生效的样式非常有限——别指望它能设置文字颜色、边框或垂直对齐。
为什么 <col> 加 background-color 没反应？
这不是 bug，是规范限制：<col> 元素本身不渲染内容，CSS 规范只允许它继承极少数属性。即使你写了 style="background-color: #f00"，浏览器也会忽略。
- 真正有效的样式只有：
width、text-align、border（仅在border-collapse: collapse下影响列分隔线）、visibility: collapse -
background-color在部分浏览器中可能“看起来”有效，但实际是渲染引擎把样式错误地透传给了单元格，行为不可靠，不应依赖 - 想给列设背景色？必须选中单元格，不是
<col>
td:nth-child(n) 和 th:nth-child(n) 怎么写才不翻车？
这是最常用也最容易出错的方式。关键不是“怎么写”，而是“怎么避免写错”：
- 必须同时匹配
td和th，否则表头和数据行颜色/对齐不一致 - 写法示例：
table td:nth-child(2), table th:nth-child(2) { text-align: right; } - 如果某行用了
colspan="2"，后续单元格的:nth-child()序号会偏移，导致样式错位——纯数据表可用，含合并单元格的表格慎用 - 不要写
tr:nth-child(1) td:nth-child(2)，这是“第一行第二列”，不是“整列”
用 <colgroup></colgroup> + span 管理多列分组样式
当列有逻辑分组（比如前两列是基础信息、第三列是操作栏、后两列是状态汇总），硬写一堆 :nth-child() 很难维护。这时 <colgroup></colgroup> 就显出价值了：
-
<colgroup></colgroup>必须放在<table> 开头、<code><thead> 之前，否则无效 <li>每个 <code><col>对应一列，span属性可声明它覆盖几列（如<col span="2">） - 给
<col>加 class，再用 CSS 定义对应列的单元格样式，例如：.action-col ~ td:nth-child(3)配合<col class="action-col"> - 注意：class 名不能直接作用于
<col>的视觉效果，它只是个钩子，样式仍要落在td/th上
真正麻烦的地方不在写法，而在列数动态变化时——JS 渲染表格、服务端返回列数不固定、用户拖拽调整列宽……这些场景下，:nth-child() 和 <col> 数量都得同步更新，稍有遗漏就全乱。这时候不如放弃“列级样式”，改用每单元格加 data-col-id 或 class 来控制，虽然代码多点，但稳定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
