colgroup 本身不控制列宽，真正起作用的是其内部的 col 标签；col 必须作为 table 的直接子元素位于 caption 之后、thead 之前，且数量与表格列数严格对应；必须配合 table-layout: fixed 和 table 显式宽度（如 width: 100% 或固定像素）才能生效；col 的 width 属性已废弃，须用 style="width: ..." 设置，百分比值仅在 table 有明确宽度时有效；span 属性仅作逻辑占位，不分配宽度；动态列数建议用 js 动态生成 col。
colgroup 本身不控制列宽，真正起作用的是它里面的 col 标签；没写 col，或者写了但位置/数量/样式写错，列宽就完全不会变。
col 必须写在 colgroup 里，且顺序和列数要严格对齐
表格有 5 列，colgroup 就得恰好包含 5 个 col（或用 span 精确覆盖全部），少一个，最后一列大概率塌缩为 0 宽度（Safari 尤其明显）；多一个，多余项无效但会干扰调试。
-
colgroup必须是table的直接子元素，且必须在caption（如有）之后、thead或第一行tr之前 - 错误位置示例：
<tbody><colgroup></colgroup></tbody>→ 浏览器直接忽略 - 正确结构示例：
<table> <colgroup> <col style="width: 120px"> <col style="width: 25%"> </colgroup> <thead>...</thead> </table>
width 属性已废弃，必须用 style="width: ..."
<col width="120"> 在 HTML5 中已被标记为 obsolete，所有现代浏览器静默忽略——DevTools 里能看到标签，但 computed styles 中根本不会出现宽度值。
- ✅ 正确写法：
<col style="width: 120px">或<col class="w-120">（配合 CSS 类） - ❌ 错误写法：
<col width="120">、<colgroup width="120"></colgroup> - 百分比值（如
width: 30%）只在table有明确宽度时才生效，否则无效
table-layout: fixed 是列宽生效的硬性前提
没有 table-layout: fixed，col 的 width 只是“建议”，浏览器仍按内容长度重算列宽——哪怕你给每列都写了 style="width: 100px"，长文本照样撑开。
- 必须加在
table上：<table style="table-layout: fixed; width: 100%"> <li> <code>width: 100%要求父容器有明确宽度；固定像素（如width: 800px）更稳妥 - 启用后，首行
th/td的内联width会覆盖col设置，所以第一行别乱设宽度 - 某列漏写
col→ 该列可能塌缩为 0，建议显式写<col style="width: auto">或最小值 - 想三列等宽 100px：必须写三个独立
<col style="width: 100px"> -
span真有用的地方是语义分组，比如<col id="user-cols" span="2">，再配合th:nth-child(-n+2)批量加背景或边框 - 动态列数（如 JS 渲染或后端返回）时，手写
colgroup几乎不可维护，推荐用 JS 动态生成col并注入style
span="n" 不是批量设宽，只是逻辑占位
<col style="width: 300px" span="3"> 不会让三列各得 100px，而是让第 1 列宽 300px，第 2、3 列回归默认行为（内容撑开或由后续 col 控制）。
最易被忽略的其实是 table 自身宽度 + table-layout: fixed 这一对组合——缺一不可，而且它们必须同时存在、同时生效，否则所有 col 设置都形同虚设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
