真正可靠的列级样式管理需用nth-child()配合结构声明，colgroup和col仅支持width等极少数属性且效果不稳定，不适用于通用样式控制。
不能靠<colgroup>和<col>统一控制所有列样式，它只支持极少数属性，且效果不稳定；真正可靠的列级样式管理，得靠nth-child()配合结构声明来实现。
colgroup和col只管“结构”，不管“样式”
<colgroup>不是样式工具，而是语义容器，用来提前告诉浏览器“这表格有几列、怎么分组”。<col>本身不渲染内容，也不参与视觉绘制。你给它加class或style，看起来像生效了，其实只是浏览器在特定条件下偶然渲染——比如width可能起作用，background-color在Chrome里有时显示，在Safari里基本消失，Firefox又表现不同。
-
width（像素或百分比）是唯一广泛兼容的属性，但必须配合table-layout: fixed才真正强制生效 -
background-color在多数现代浏览器中被忽略，规范层面本就不该支持 -
color、font-size、padding、text-align等全部无效，写了也白写 -
border仅影响列边缘，不可靠，建议用border-collapse: collapse+ 单元格边框替代
span属性不是“批量复制”，而是“跳过列位”
span="3"的意思是“这个<col>覆盖接下来连续的3列”，但它**不会把样式广播给后两列**。比如：<col width="120" span="3">只让第1列宽120px，第2、3列实际没宽度约束，会回退到内容撑开或均分模式。
- 想三列都固定120px？必须写三个独立的
<col width="120"> - 想语义分组（如“用户信息”含3列）？可以用
<col id="user-cols" span="3">，再用CSS选中th:nth-child(-n+3)统一设背景或边框 - 所有
<col>的span总和必须等于表格实际列数，否则后续列失去结构锚点，样式错位
真正能批量控制列样式的办法：nth-child + 显式结构
要让第2–4列背景统一、文字右对齐、加右侧边框，别指望<col>，直接用CSS定位单元格：
立即学习“前端免费学习笔记（深入）”；
- 写法示例：
th:nth-child(2), th:nth-child(3), th:nth-child(4), td:nth-child(2), td:nth-child(3), td:nth-child(4) { background: #f9f9f9; text-align: right; border-right: 1px solid #ddd; } - 避免用
nth-of-type()——因为<th>和<td>标签不同，序列会被打断 - 配合
<colgroup>里的id或class做语义标记，方便JS读取列范围（如document.querySelector('#price-col').span），但样式仍靠CSS驱动 - 响应式场景下，用
min-width+max-width替代固定width，更健壮
位置和结构错不得半步
<colgroup>必须是<table>的**直接子元素**，且必须放在<caption>（如有）之后、<thead>之前。放错位置——比如塞进<tbody>里，或写在<tr>后面——浏览器直接忽略，DevTools里都看不到节点。
- 一个
<table>里可以有多个<colgroup>，但推荐合并为一个，避免解析歧义 -
<col>必须闭合（</col>或<col />），HTML5不允许自闭合省略 - 如果表格动态生成，
<colgroup>必须同步生成，不能靠JS事后插入——浏览器只在初始解析阶段读取它
