colgroup必须作为table的直接子元素，位于caption之后、thead/tbody/tr之前；位置错误将导致样式静默失效，且devtools不报错。
colgroup 必须放对位置，否则整段失效
<colgroup></colgroup>不是可插拔的装饰标签，它只在表格解析初期起作用。浏览器会严格检查它的父级和兄弟节点：必须是<table>的**直接子元素**，且顺序只能在<code><caption></caption>（如有）之后、<thead>之前。
<p>常见错误包括：<code><colgroup></colgroup>被塞进<tbody>里、写在<code><tr>后面、或者用 JS 动态插入到<code><thead>之后——这些都会导致 DevTools 里能看到标签，但样式完全不渲染，也不报错。
<ul><li>调试时打开 Elements 面板，确认<code><colgroup></colgroup>是否出现在<table>下第一层子节点中
<li>动态渲染表格（如 React/Vue）时，<code><colgroup></colgroup>必须与<thead>同步生成，不能靠后续 patch 补上
<li>若用了<code><caption></caption>，它必须在<colgroup></colgroup>前面；顺序错乱（比如<colgroup></colgroup>在<caption></caption>前）也会被忽略
span="N" 不是“选中第 N 列”，而是“占 N 个列位”
<col span="3">的意思是：从当前<col>开始，连续覆盖接下来的 3 列（即它生效的列索引是连续的，不是跳选）。所有<col>的span值加起来，必须等于表格实际总列数，否则末尾列会“失联”——没有对应<col>，也就没有宽度、背景等声明。
- 5 列表格写成
<col span="2"> <col span="2">→ 最后一列无样式，宽度由内容撑开 - 想控制第 2–4 列？得用
<col> <col span="3">，而不是<col span="3" data-start="2">（data-start无效） - 列数动态变化时，别硬凑
span，用 JS 计算真实列数再生成对应数量的<col>更可靠
哪些样式真能生效？别白费劲写 color 或 font-size
<col>只继承极少数 CSS 属性。你写上去却没反应，大概率不是语法错，而是浏览器压根不支持该属性作用于列级元素。
- ✅ 稳定生效：
width（需配合table-layout: fixed）、background-color（需border-collapse: collapse+th, td { background: transparent }）、visibility: collapse - ⚠️ 有条件生效：
border-left/border-right（仅 Chrome/Edge 在collapse模式下表现尚可，Firefox 基本不认） - ❌ 完全无效：
color、font-size、text-align、padding、vertical-align——这些必须写在<th>或<code><td>上 <h3>background-color 和 width 覆盖逻辑很现实</h3> <p><code><col>设的background-color不是“画一层底色盖住所有单元格”，而是作为“后备底色”存在：只要任意一个<td>或<code><th>自己设置了<code>background-color，那一格就立刻覆盖掉<col>的设置。- 想让整列背景统一？得确保所有对应单元格都不设背景，或统一用 class 控制：
.col-price { background: #f0f9ff }同时加到<col>和所有<td>/<code><th>上 <li> <code>width优先级虽高，但会被table-layout: fixed下的第一行<th>内容反向覆盖——如果第一行某<code><th>写了<code>style="width: 200px"，它会接管该列宽度，<col>的设置形同虚设 - 百分比宽度（如
width: 30%）必须依赖<table>有明确宽度（<code>width: 100%或固定值），否则按 0 计算 真正难搞的不是怎么写<colgroup></colgroup>，而是当表格结构变复杂（比如带colspan、服务端动态列、响应式折叠）时，如何保证<col>数量、顺序、span值三者与真实渲染列严格对齐——差一个，样式就偏移，而且毫无提示。
- 想让整列背景统一？得确保所有对应单元格都不设背景，或统一用 class 控制：
