colgroup和col不支持多数CSS样式，仅width和部分background可能偶然生效；可靠列样式需用:nth-child()配合col的span属性；colgroup核心价值在于语义化、无障碍和JS列宽控制。
Colgroup 本身不支持 CSS 类名或样式属性，别白费劲写 class 或 style 在它上面
直接给 <colgroup> 或它的子元素 <col> 添加 class、style，在大多数浏览器里确实能“看起来生效”，但这是错觉——<col> 是个替换元素（replaced element），它的样式继承和渲染行为极其受限。width、background、border 这些常见样式中，只有 width 和部分 background（仅当整列有内容且触发了列渲染上下文时）可能偶然起效，其余基本被忽略。真正可靠的列级样式控制，必须靠 CSS 的 :nth-child() 或 col 伪类配合 <col> 的 span 结构来间接约束。
用 <col> 的 span 属性 + :nth-child() 精准定位列范围
海量表格常有分组列（如“用户信息”含姓名/邮箱/注册时间，“行为数据”含点击量/停留时长/转化率），这时靠手动给每列 <th> 加 class 维护成本爆炸。正确做法是：用 <colgroup> 显式声明逻辑列组，再用 span 标记范围，最后用 CSS 选中对应列位置：
<colgroup>
<col span="3" id="user-cols">
<col span="3" id="behavior-cols">
</colgroup>
<thead>
<tr>
<th>姓名</th>
<th>邮箱</th>
<th>注册时间</th>
<th>点击量</th>
<th>停留时长</th>
<th>转化率</th>
</tr>
</thead>然后写 CSS：
/* 第1–3列统一背景色 */
th:nth-child(-n+3), td:nth-child(-n+3) {
background-color: #f8f9fa;
}
<p>/<em> 第4–6列加右边界 </em>/
th:nth-child(n+4):nth-child(-n+6),
td:nth-child(n+4):nth-child(-n+6) {
border-right: 1px solid #dee2e6;
}-
span不影响 DOM 结构，只用于语义标记和 JS 读取（比如document.querySelector('#user-cols').span） -
:nth-child()是唯一稳定跨浏览器的列定位方式，比col伪类兼容性好得多 - 避免用
:nth-of-type()——<th>和<td>是不同标签，会断掉序列
海量数据下，<colgroup> 对渲染性能的实际影响微乎其微
有人以为用 <colgroup> 能“提前告诉浏览器列宽，加速渲染”，这在现代浏览器里基本是过时认知。Chrome/Firefox/Edge 都已优化表格布局算法，是否写 <colgroup> 对首屏渲染时间差异在 1ms 级别，远不如减少 <td> 内联样式或避免 table-layout: auto 影响大。但它仍有不可替代的价值：
立即学习“前端免费学习笔记（深入）”；
- 屏幕阅读器能通过
<colgroup>理解列分组语义，提升无障碍体验 - JS 操作列宽时（比如拖拽调整），
<col>元素是唯一可直接设置width的 DOM 节点 - 导出为 Excel 时，某些库（如 SheetJS）会读取
<col>的width属性生成列宽
别指望 <col> 控制文字对齐或字体颜色
所有涉及文本渲染的样式（text-align、color、font-size、vertical-align）都必须作用于 <th>/<td>，或者用 :nth-child() 选中它们。试图这样写毫无意义：
<col style="text-align: right; color: red;">
原因很直接：<col> 没有渲染盒（rendering box），它只是列的抽象占位符，浏览器不会为它生成视觉层。你看到的“对齐效果”，其实是父 <tr> 或表格整体 text-align 的继承结果，与 <col> 无关。
真正要管住列内文字样式，就老老实实写：
td:nth-child(5), th:nth-child(5) {
text-align: right;
color: #dc3545;
}列级管理的本质，是用 <colgroup> 做结构声明，用 CSS 选择器做样式绑定——两者各司其职，强行让 <col> 扛样式，只会掉进浏览器兼容性和可维护性的坑里。
