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></colgroup>必须是<table> 的直接子元素，放错位置（比如塞进 <code><tbody> 里）→ 浏览器静默忽略，DevTools 里也看不到效果 <h3>为什么 width 属性已废弃，必须用 CSS？</h3> <p>HTML5 规范移除了 <code><col width="120">这类属性，浏览器不再解析它。这不是兼容性问题，是标准层面的删除——所有现代浏览器都会静默丢弃该属性。生效的唯一方式是通过 CSS：
style="width: 120px"或class="col-120"配合外部样式表。百分比值（如width: 30%）还依赖父<table> 有明确宽度（<code>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> 的宽度（<code>width: 100%或具体像素），否则百分比列宽无法计算 - Safari 对漏写
<col>最敏感：少一个，对应列可能渲染为 0 宽度，整列内容消失 - 动态生成表格时，
<col>数量必须与实际列数严格一致；多一个无害，少一个就失控 - 用
td:nth-child(2), th:nth-child(2)精确选中第 2 列所有单元格 - 给每列
<td> 加 class（如 <code>class="col-name"），再统一写.col-name { width: 120px; } - 复杂响应式场景，优先考虑
display: grid替代<table>，用 <code>grid-template-columns直接定义列宽和跨度colgroup 的价值在于语义化和初始渲染锚定，不是样式分发总线。真要批量操作，CSS 选择器或 JS 动态注入
<col>更可控，也更易调试。
真正批量控制列样式的替代路径
想让第 2、4、6 列统一背景色或边框？别指望
<col>的span—— 它不支持跨列选择，也不支持 nth 类逻辑。可靠做法是绕开<colgroup></colgroup>，直接用 CSS 选择器： -
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
