colgroup必须是table的直接子元素，位于caption之后、thead/tbody之前，否则样式静默失效；col的span表示从当前列起连续覆盖几列，需确保总列数匹配；仅width和background-color等少数CSS属性在col上有效，隐藏列应使用visibility: collapse。
colgroup 必须放对位置，否则样式完全不生效
浏览器只在解析 <table> 开头阶段读取列结构信息，<colgroup> 必须是 <table> 的**直接子元素**，且顺序严格：在 <caption>（如果有）之后、<thead>/<tbody>/<tr> 之前。写错位置（比如塞进 <tbody> 里，或跟在第一行 <tr> 后面）会导致样式静默失效——DevTools 不报错，也不高亮，你只会发现样式没反应。
验证是否生效最直接的方法：打开 DevTools，展开 <table> 节点，确认 <colgroup> 出现在第一层子节点，且紧邻 <caption>（或 table 开始标签）之后。
- ✅ 正确：
<table><caption>...</caption><colgroup>...</colgroup><thead>...</thead><tbody>...</tbody></table> - ❌ 常见错误：
<tbody><colgroup>...</colgroup><tr>...</tr></tbody>（被忽略） - ⚠️ 注意：
<colgroup>不生成任何 DOM 节点，它只影响后续所有<tr>中对应列的渲染计算
col 标签的 span 属性不是“第几列”，而是“从当前开始连续几列”
span 是目前唯一广泛兼容的属性，但它容易引发列数错位。它的含义是：**从当前 <col> 所在位置起，向右连续覆盖 N 列**，不跳列、不索引、不感知总列数。
例如表格有 5 列，<col span="2"></col><col></col><col span="2"></col> 表示：第 1–2 列、第 3 列、第 4–5 列 —— 总共 5 列，一一对应。但如果写成 <col span="3"></col><col span="3"></col>，第二个 span="3" 的后两列超出范围，会被丢弃，第 5 列实际无样式可继承。
立即学习“前端免费学习笔记（深入）”；
- ✅ 更稳做法：显式写出每个
<col>，避免 span 计算歧义，尤其在 JS 动态渲染时，务必让生成的<col>数量与首行tr.cells.length严格一致 - ⚠️
<col>必须闭合（HTML5 要求），不可省略结束标签 - ⚠️ 多个
<colgroup>之间夹注释或空格节点，旧版 Safari 可能中断列声明
哪些 CSS 属性真正在 col 上起作用？别白费劲设无效样式
<col> 支持的样式极少，浏览器只用它做布局计算，不参与内容绘制。设错属性不仅无效，还可能掩盖真正问题。
- ✅ 稳定有效：
width（必须是具体值，如120px、30%；auto无效）、background-color（Chrome/Safari 支持较好，Firefox 行为不稳定） - ⚠️ 部分支持：
text-align（Chrome 可继承影响单元格，Safari 常忽略；如需可靠对齐，仍得写在<td>或<th>上） - ❌ 基本无效：
color、font-size、padding、margin、border（列边框兼容性极差，建议用border-collapse: collapse+ 单元格边框替代） - ⚠️ 注意：
background-color容易被<td>自身背景色覆盖，优先级低于单元格样式；真要统一背景，不如用td:nth-child(2)或加 class 控制
隐藏整列要用 visibility: collapse，别用 display: none
想动态控制某几列显示/隐藏，唯一规范方式是给 <col> 设置 visibility: collapse。它会让列隐藏且不占空间，相邻列自动填补空隙，语义正确且兼容稳定。
- ✅ 正确：
<col style="visibility: collapse">或 JS 操作col.style.visibility = 'collapse' - ❌
display: none在<col>上无效，浏览器直接忽略 - ⚠️ 如果表格用了
table-layout: auto，visibility: collapse可能不触发重排，务必搭配table-layout: fixed使用 - ⚠️ 隐藏后，
<th>/<td>的:nth-child()伪类序号不变，仍按原始列数计数
真正关键的点在于：<col> 和 <colgroup> 是声明式列结构机制，不是样式补丁。样式没反应，90% 是位置错了、列数对不上，或者写了根本不起效的属性——先检查这三处，比反复调 CSS 优先级更高效。
