colgroup 必须是<table>的直接子元素，且严格位于<caption>（如有）之后、<thead>之前；多个colgroup可并存但均需满足该位置约束。
colgroup 不负责“对齐”列宽，它只声明列的结构和基础样式范围。真正控制列宽的是 col 元素配合 table-layout: fixed 和显式宽度设置。
colgroup 必须放在 table 的什么位置
colgroup 必须是 <table> 的直接子元素，且严格位于 <caption>（如有）之后、<thead> 之前。塞进 <tbody> 或 <tr> 里，浏览器会忽略它，DevTools 里也看不到 DOM 节点。
- ✅ 正确顺序：
<table><caption>...</caption><colgroup>...</colgroup><thead>...</thead><tbody>...</tbody></table> - ❌ 常见错位：
<tbody><colgroup>...</colgroup><tr>...</tr></tbody>→ 完全无效 - ⚠️ 多个
colgroup可并存，但每个都必须满足位置约束；React/Vue 动态渲染时，需确保 DOM 插入顺序不变
col 标签的 span 属性到底怎么算列数
span 是逻辑列跨度，不是样式广播开关。它只让一个 <col> 占据多列的位置索引，但样式（如 width、background-color）仅作用于该 <col> 对应的起始列，其余列不继承。
- ❌ 错误写法：
<col style="width: 120px" span="3">→ 实际只有第 1 列宽 120px，第 2、3 列回退为自动宽度 - ✅ 正确写法：想三列等宽，就写三个
<col style="width: 120px"> - ✅
span真正有用场景：语义分组 + CSS 批量选中，例如<col id="price-cols" span="2">配合th:nth-child(4), th:nth-child(5) { color: red; } - ⚠️ 所有
<col>的span值之和必须严格等于表格总列数，否则末尾列无<col>控制，宽度和背景色丢失
为什么写了 width 却没生效
<col width="120"> 这种 HTML 属性在 HTML5 中已被废弃，所有现代浏览器静默忽略。必须用 style="width: 120px"，且依赖两个前提条件同时成立：
立即学习“前端免费学习笔记（深入）”；
- ✅
<table style="table-layout: fixed">—— 缺一不可；不加这个，列宽仍由内容撑开 - ✅
<table>必须有明确宽度（如style="width: 100%"或style="width: 800px"），否则百分比width在<col>中无法计算 - ⚠️
width: auto在<col>上无效，只能用具体值：px、%、em；百分比按外层容器宽计算，不是<table>自身宽 - ⚠️ 某列漏设
width→ 该列可能塌缩为 0（Safari 尤其明显），建议统一设width: 1fr（需配合 CSS Grid 替代方案）或最小值如min-width: 20px
colgroup 能控制哪些样式，不能控制哪些
colgroup / col 是结构级声明，只影响极少数 CSS 属性，其余全部要回到 <th> / <td> 上补全。
- ✅ 支持：背景色（
background-color）、边框（border）、宽度（width）、visibility - ❌ 不支持：字体大小（
font-size）、内边距（padding）、文字对齐（text-align）、悬停效果（:hover）、暗色模式适配、响应式断点切换 - ⚠️ 即使
<col>设了background-color，若<td>本身有背景色或透明度，也会覆盖它；务必检查层叠顺序 - ⚠️
colgroup不提供可访问性增强，列语义仍需靠<th scope="col">或 ARIA 属性表达
最易被忽略的一点：colgroup 是表格的“骨架声明”，不是 CSS 补丁。它一旦写错位置、漏算列数、或没配 table-layout: fixed，整套列宽控制就失效，且错误往往不报错、只静默退化——得靠 JS 校验：document.querySelectorAll('col').reduce((sum, c) => sum + (parseInt(c.span) || 1), 0) 是否等于 document.querySelector('tr').cells.length。
