用colgroup标签统一设置HTML列宽

先说一个很多人容易踩的坑：colgroup 并不能“一键搞定”多列宽度。它得老老实实按顺序逐列定义，span 并不会帮你把样式广播到后面的列——写错位置、漏掉列数，宽度直接就失效了，调试起来还很隐蔽。

核心原理：列数必须精确对应

如果你有一个 5 列的表格，colgroup 里就必须恰好塞进 5 个 col（或者用 span 精确覆盖全部列）。少一个，最后一列的宽度直接失控；多一个，多余的那个也完全不起作用。

• col 是按顺序从左到右绑定第 1、2、3…列的，不靠 class 或 id 来匹配，所以别指望跳着来。
• 动态生成表格时，必须同步生成等量的 col，不能先通过 JS 插入表格再补 colgroup——那样浏览器根本不会重新解析。
• 如果用了 col span="2"，它只占位两列，但后续的 col 仍然从第 3 列开始计数。别指望它自动续上，浏览器没那么智能。

width 属性的正确写法

现在你写 ，所有现代浏览器都会安静地忽略掉，不是兼容性问题，是标准层面已经移除了。生效的唯一方式是用 style="width: 120px" 或者通过 class 驱动的 CSS。

• 特别注意：width: auto 在 col 里是无效的，浏览器会当成 0 来处理。
• 百分比值（比如 width: 30%）必须配合 才能计算，否则照样被丢弃。
  推荐的做法是定义 class：
  + .w-120 { width: 120px; }，便于复用和后期主题切换。

  必要前提：table-layout: fixed

  如果没设这个属性，col 的 width 就只是一个参考值——内容一长，列照样被撑开，尤其是表格里包含长文本、图片或嵌套元素时。

  • 必须同时设置
  （或者具体像素值）。
  启用 fixed 模式后，首行 th/td 的内容长度就不再影响列宽分配了，表格布局变得可控。
  Safari 对漏掉 col 更敏感：少一个，对应列可能直接被渲染为 0 宽度，整列内容消失——调试时尤其要注意。

  span="N" 的细节：只占位，不复制样式

  比如

  ，实际效果是第 1 列宽 300px，第 2、3 列回退为默认行为（内容撑开或均分剩余空间）。这不是 bug，是规范定义如此。
  • 想要三列都是 100px？那就老老实实写三个
  。
  想要三列共占 300px 且等宽？理论上可以用
  + table-layout: fixed，但实际结果是第 1 列独占 300px，后两列由浏览器按剩余空间再分配，结果不可控。
  真正需要跨列统一样式（背景、边框、对齐）时，改用 td:nth-child(n) 或 :is(td, th):nth-child()，别在 span 上死磕。

  易被忽略的层级顺序

  colgroup 必须是

  的直接子元素，而且必须放在 之后、 之前。如果放错了位置（比如把它包在 里），浏览器不会报错，DevTools 里也看不到任何效果——它直接跳过解析，连个 warning 都不抛。所以调试的第一件事，就是打开 Elements 面板确认层级关系。