colgroup和col通过严格顺序匹配批量设置列宽，必须与实际列数一一对应或用span精确覆盖，且colgroup须为table直接子元素、位于caption后thead前。
colgroup 和 col 确实能批量设置列宽，但不是“写一次影响多列”的魔法——它靠的是严格顺序匹配和显式声明，漏一个、错一个，宽度就失控。
col 标签必须一一对应实际列数
表格有 4 列，colgroup 就得恰好包含 4 个 col，或用 span 精确覆盖全部（如 <col span="4">）。少一个，最后一列可能塌缩为 0 宽度（Safari 尤其明显）；多一个，多余项完全无用。
-
col按从左到右顺序绑定第 1、2、3… 列，不靠class或id匹配 - 动态生成表格时，必须同步生成等量
col，不能靠 JS 插入后才补colgroup - 用了
<col span="2">，后续col仍从第 3 列开始计数，不会自动“续上”
width 属性已废弃，必须用 CSS width
<col width="120"> 在所有现代浏览器中静默忽略——这不是兼容性问题，是 HTML5 标准移除。生效的只有 <col style="width: 120px"> 或 <col class="w-120"> 配合 CSS 类。
-
width: auto在col中无效，浏览器会当 0 处理 - 百分比值（如
width: 30%）必须配合<table style="width: 100%">才能计算，否则被丢弃 - 推荐用 class：
<col class="w-120">+.w-120 { width: 120px; }，便于复用和主题切换
table-layout: fixed 是硬性前提
没设 table { table-layout: fixed; }，col 的 width 就只是参考值——内容一长，列照样撑开，尤其含长文本、图片或嵌套元素时。
立即学习“前端免费学习笔记（深入）”；
-
<table>必须有明确宽度（如style="width: 100%"或style="width: 800px"），否则百分比width算不出来 - 某列没设
width→ 该列可能塌缩为 0，建议显式设width: 100px或最小值 - 启用后需防内容溢出：给
td, th加white-space: nowrap+overflow: hidden+text-overflow: ellipsis
span="N" 只占位，不广播样式
<col style="width: 100px" span="3"> 实际只让第 1 列宽 100px，第 2、3 列回退为默认行为（内容撑开或均分剩余空间）。这不是 bug，是规范定义。
- 想三列都 100px？写三个
<col style="width: 100px"> - 想三列共占 300px 且等宽？用
<col span="3" style="width: 300px">+table-layout: fixed，但第 2、3 列宽度不可控 -
span真正有用的地方是语义分组（如<col span="2" id="user-cols">），再配合th:nth-child(-n+2)批量选中前两列设背景或边框
最易被忽略的点：colgroup 必须是 <table> 的**直接子元素**，且必须在 <caption>（如有）之后、<thead> 之前——放错位置不会报错，但 DevTools 里根本看不到效果，浏览器直接跳过解析。
