colgroup无法设置背景色，因col元素不渲染；列宽可用width属性或css控制，但背景色必须作用于td/th单元格，推荐用:nth-child()或class精准选择。
colgroup 无法直接设置背景颜色
colgroup 和 col 元素本身不渲染为可视内容，它们只是列的“元数据容器”，浏览器不会把 background-color 应用到 col 上（即使写了也无效）。你看到的“列背景”其实是单元格（td/th）继承或覆盖的结果。所以真正起作用的是：给对应列的每个单元格统一设样式，或借助 CSS 的 :nth-child() 伪类批量控制。
用 colgroup + width 属性控制列宽比例（仅支持像素/百分比）
colgroup 的 width 属性能影响布局，但有严格限制：
- 只接受
px、%、auto—— 不支持fr、ch、em或无单位数字（如width="2"是非法的） - 百分比基于表格总宽度计算，且所有列百分比之和不必等于 100%；超出部分会压缩，不足则留空
-
width在现代浏览器中仍有效，但属于 HTML 属性，优先级低于 CSS 的width样式
示例：三列按 2:3:5 比例分配（总宽 100%）：
| A | B | C |
给特定列加背景色的可靠做法
必须作用于单元格。推荐用 CSS 选择器精准定位列：
- 用
td:nth-child(1), th:nth-child(1)选第 1 列（注意：th若在thead中也要单独写） - 避免只写
td:nth-child(n)—— 如果某行有colspan，序号会错乱 - 若表格结构固定，可给每列单元格加 class（如
class="col-1"），更稳定
示例（第 2 列背景为浅蓝）：
td:nth-child(2), th:nth-child(2) {
background-color: #e6f7ff;
}
colgroup 配合 CSS width 更灵活（推荐组合）
把 colgroup 当语义化列定义，宽度和样式全交给 CSS 控制，兼容性和可维护性更好：
- 移除
col上的width属性，改用 CSS：col:nth-child(1) { width: 20%; } - 此时
col虽不渲染背景，但width声明仍会影响表格布局（需配合table { table-layout: fixed; }才严格生效） - 注意：CSS 设置
col的width在 Safari 旧版本中有 bug，稳妥起见建议对td/th直接设width
真正容易被忽略的是：只要有一列单元格内容过长（且未设 white-space: nowrap 或 overflow），整个列宽比例就会被撑开，colgroup 或 CSS 的宽度声明都可能失效。先锁死 table-layout: fixed，再设列宽，最后处理内容截断逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
