colgroup 必须作为 table 的直接子元素置于 thead 或首行 tr 之前，用 CSS width 设置列宽，span 不广播样式，三列等宽需写三个 col，且需 table-layout: fixed 和显式表格宽度配合。
colgroup 能调列宽，但不是“分组方案”——它不支持跨列广播样式，span 只占位、不复制宽度，真要三列等宽，就得写三个 col，少一个就失效。
colgroup 必须放对位置，否则完全静默失效
浏览器只认 <table> 开头后、<thead> 或第一行 <tr> 之前的 <colgroup>。它必须是 <table> 的**直接子元素**，不能包在 <tbody>、<div> 里，也不能塞进 <caption> 后面再套一层。
常见错误：
-
<table><tbody><colgroup>...</colgroup></tbody></table>→ DevTools 里根本看不到效果，浏览器跳过解析 -
<table><caption>标题</caption><div><colgroup>...</colgroup></div></table>→ 同样无效
调试第一步：打开 Elements 面板，确认 <colgroup> 是 <table> 下第一层子节点，且紧挨着起始标签。
立即学习“前端免费学习笔记（深入）”；
col 的 width 属性已废弃，必须用 CSS width
<col width="120"> 在所有现代浏览器中被静默忽略，不是兼容性问题，是 HTML5 标准移除。生效的只有：
<col style="width: 120px">-
<col class="w-120">+.w-120 { width: 120px; }
注意：width: auto 在 col 中无效，会被当作 0 处理；百分比值（如 width: 30%）必须配合 <table style="width: 100%"> 才能计算，否则丢弃。
span="N" 不等于“让 N 列都变宽”，它只影响首列
<col span="3" style="width: 300px"> 实际只把第 1 列设为 300px，第 2、3 列回退为内容撑开或均分剩余空间——这不是 bug，是规范定义。
想三列都 100px？写三个：
<colgroup> <col style="width: 100px"> <col style="width: 100px"> <col style="width: 100px"> </colgroup>
想三列共占 300px 且等宽？不行——col 不支持 fr 单位，也不支持弹性分配。只能靠 table-layout: fixed + 显式总宽 + 百分比均分（如每列 width: 33.33%），但需接受小数精度误差。
table-layout: fixed 是硬性前提，否则 col 宽度只是建议
没设 table { table-layout: fixed; }，col 的 width 就只是参考值。含长文本、图片或嵌套元素时，列照样被撑开，尤其 Safari 对漏掉 col 更敏感：少一个，对应列可能渲染为 0 宽度，整列内容消失。
配套要求：
-
<table>必须有显式宽度（width: 100%或width: 800px） - 所有
col数量必须与实际列数严格匹配（含colspan后的逻辑列数） - 动态生成表格时，JS 必须同步生成等量
col，不能事后插入
真正难搞的不是怎么写 colgroup，而是列数变化时如何保证 col 数量、顺序和实际 <th>/<td> 列数始终对齐——差一个，控制就断在最后一列。
