如何在HTML中通过 colgroup 标签统一设置列的宽度

colgroup 无法统一设置多列宽度，必须逐列定义且数量严格匹配表格列数；width 属性已废弃，须用 CSS width 配合 table-layout: fixed 才生效，且 colgroup 必须为 table 的直接子元素。

colgroup 不能“统一设置”多列宽度——它只能按顺序逐列定义，span 不广播样式，写错位置或漏掉列数，宽度就直接失效。

col 标签必须一一对应实际列数

表格有 5 列，colgroup 就必须恰好包含 5 个 col（或用 span 精确覆盖全部），少一个，最后一列宽度失控；多一个，多余项完全无用。

• col 按顺序从左到右绑定第 1、2、3… 列，不靠 class 或 id 匹配
• 动态生成表格时，必须同步生成等量 col，不能靠 JS 插入后才补 colgroup
• 如果用了 col span="2"，它只占位两列，但后续 col 仍从第 3 列开始计数——别指望自动续上

width 属性已废弃，必须用 CSS width

<col width="120"> 在所有现代浏览器中静默忽略，不是兼容性问题，是标准移除。生效的只有 style="width: 120px" 或 class 驱动的 CSS。

• width: auto 在 col 中无效，浏览器会当 0 处理
• 百分比值（如 width: 30%）必须配合 <table style="width: 100%"> 才能计算，否则被丢弃
• 推荐用 class：<col class="w-120"> + .w-120 { width: 120px; }，便于复用和主题切换

table-layout: fixed 是硬性前提

没设 table-layout: fixed，col 的 width 就只是参考值——内容一长，列照样撑开，尤其含长文本、图片或嵌套元素时。

立即学习“前端免费学习笔记（深入）”；

• 必须同时设置 <table style="table-layout: fixed; width: 100%">（或具体像素）
• 启用后，首行 th/td 的内容长度不再影响列宽分配
• Safari 对漏掉 col 更敏感：少一个，对应列可能渲染为 0 宽度，整列内容消失

span="N" 只占位，不复制样式

<col span="3" style="width: 300px"> 实际只让第 1 列宽 300px，第 2、3 列回退为默认行为（内容撑开或均分剩余空间）。这不是 bug，是规范定义。

• 想三列都 100px？写三个 <col style="width: 100px">
• 想三列共占 300px 且等宽？用 <col span="3" style="width: 300px"> + table-layout: fixed，但需接受第 1 列独占 300px，后两列由浏览器按剩余空间再分（不可控）
• 真正需要跨列统一样式（背景、边框、对齐），改用 td:nth-child(n) 或 :is(td, th):nth-child()，别依赖 span

最易被忽略的点：colgroup 必须是 <table> 的**直接子元素**，且必须在 <caption> 之后、<thead> 之前。放错位置（比如包在 <tbody> 里）不会报错，DevTools 里也看不到任何效果——浏览器直接跳过解析，连 warning 都不抛。调试第一件事，就是打开 Elements 面板确认层级。