colgroup 仅提供列级样式锚点，不渲染且不占位，真正控制列宽需配合 table-layout: fixed 和 col 的 CSS width；HTML5 已废弃 width 属性，必须用 CSS 设置。
colgroup 的作用不是“控制列宽”，而是提供列级样式锚点
它本身不渲染、不占位、不参与布局计算，只是给浏览器一个信号：“接下来的第 N 列，可以按这个 <col> 的样式去初始化渲染”。真正起效的是 <col> 上的 CSS width，且仅在 table-layout: fixed 下被强制采纳。
常见错误现象：<col style="width: 120px"> 写了但列还是被长文本撑开 → 没设 table-layout: fixed；<col span="3" style="width: 300px"> 期望三列均分 → 实际只有第 1 列拿到 300px，后两列回退为内容驱动宽度。
-
<col>的样式只作用于它“绑定”的第一列，span只是跳过后续列的声明，不复制样式 - 没有显式
<col>覆盖的列，其宽度完全由内容或浏览器自动分配（尤其在table-layout: auto下） -
<colgroup>必须是<table>的直接子元素，放错位置（比如塞进<tbody>里）→ 浏览器静默忽略，DevTools 里也看不到效果
为什么 width 属性已废弃，必须用 CSS？
HTML5 规范移除了 <col width="120"> 这类属性，浏览器不再解析它。这不是兼容性问题，是标准层面的删除——所有现代浏览器都会静默丢弃该属性。
生效的唯一方式是通过 CSS：style="width: 120px" 或 class="col-120" 配合外部样式表。百分比值（如 width: 30%）还依赖父 <table> 有明确宽度（width: 100% 或像素值），否则计算无基准，直接失效。
立即学习“前端免费学习笔记（深入）”；
-
width: auto在<col>中无效，会被当 0 处理 - 使用 class 更利于维护和主题切换，例如
<col class="w-80">+.w-80 { width: 80px; } - 避免混合写法：既写
width="120"又写style="width: 120px"，前者纯冗余
table-layout: fixed 是列宽可控的硬性前提
默认 table-layout: auto 下，浏览器先遍历所有单元格内容，再按最长内容反推列宽 —— 此时 <col> 的 width 只是参考值，毫无约束力。
启用 table-layout: fixed 后，浏览器改用“先定列宽、再填内容”策略：列宽严格按 <col> 的 CSS width 分配，超出部分靠 overflow、text-overflow 或换行控制。
- 必须同时设置
<table>的宽度（width: 100%或具体像素），否则百分比列宽无法计算 - Safari 对漏写
<col>最敏感：少一个，对应列可能渲染为 0 宽度，整列内容消失 - 动态生成表格时，
<col>数量必须与实际列数严格一致；多一个无害，少一个就失控
真正批量控制列样式的替代路径
想让第 2、4、6 列统一背景色或边框？别指望 <col> 的 span —— 它不支持跨列选择，也不支持 nth 类逻辑。可靠做法是绕开 <colgroup>，直接用 CSS 选择器：
- 用
td:nth-child(2), th:nth-child(2)精确选中第 2 列所有单元格 - 给每列
<td>加 class（如class="col-name"），再统一写.col-name { width: 120px; } - 复杂响应式场景，优先考虑
display: grid替代<table>，用grid-template-columns直接定义列宽和跨度
colgroup 的价值在于语义化和初始渲染锚定，不是样式分发总线。真要批量操作，CSS 选择器或 JS 动态注入 <col> 更可控，也更易调试。
