colgroup仅支持width、background-color、border和visibility:collapse；其他样式如font-size、text-align等无效，需用th/td的:nth-child()实现。
colgroup 只能控制哪些样式？别白费劲写 font-size
colgroup 和它的子元素 col 不是普通容器，它们不渲染内容，也不继承大多数 CSS 属性。你给 col 写 color、font-size、text-align、padding，浏览器会直接忽略——不是 bug，是规范如此。
真正能生效的只有几个：
- width（最稳定，优先级高）
- background-color（但会被 td/th 自身背景覆盖）
- border（仅部分浏览器支持左右边框，Firefox 基本无效）
- visibility: collapse（隐藏整列，可靠）
想让第二列文字右对齐？别在 col 上设 text-align，得写：td:nth-child(2), th:nth-child(2) { text-align: right; }
colgroup 放错位置就等于没写
colgroup 必须是 table 的**直接子元素**，且顺序严格：在 caption（如果有）之后、thead/tbody/tr 之前。常见失效场景：
- 把 colgroup 塞进 tbody 或 tr 里 → 浏览器静默忽略
- 写在 thead 后面 → 解析器可能自动挪位，行为不可靠
- 多个 colgroup 中间夹了注释或空格 → 某些旧引擎中断解析
DevTools 里看不到报错，但你在 Elements 面板里搜不到它被渲染出来，就是放错了。
span 属性算错列数，样式全乱
col 的 span 是“从当前列开始向右占几列”，不是“第几列到第几列”。比如：<col span="2"></col><col span="3"></col> 在一个 4 列表格中，第二个 col 实际只影响第 3、4 列，“第 5 列”不存在，多余 span 被丢弃。
立即学习“前端免费学习笔记（深入）”；
务必确保所有 col 的 span 总和等于表格物理列数（即第一行 tr 的 cells.length）。动态生成表格时，JS 渲染完 tr 后，必须同步更新 colgroup，否则样式“漂移”。
遇到 th colspan="2"？colgroup 不感知跨格，仍按物理列数分配，视觉上可能看起来没对齐——这是正常现象，不是 bug。
真正可靠的列样式，靠 :nth-child() 配合 col 的 span 结构
用 col 的 span 标记逻辑分组（如用户信息列、行为数据列），再用 CSS 定位对应范围：th:nth-child(-n+3), td:nth-child(-n+3) { background-color: #f8f9fa; }
关键点：
- 必须用 :nth-child()，不是 :nth-of-type()（th 和 td 是不同标签，序列会断）
- col 上加 class 主要用于 JS 读取（如 document.querySelector('#user-cols').span），不是为了样式
- col 本身不支持类名驱动样式，所有视觉效果最终都要落到 th/td 上
复杂点在于：语义分组（col + span）和视觉样式（:nth-child()）要手动对齐，一旦列数变化，两处都得改——这个同步成本容易被忽略。
