colgroup是html5中用于批量定义表格列样式（如宽度、背景、边框）的语义化标签，需配合col和table使用，且仅部分css属性生效；它不渲染内容，必须置于thead前或caption后，不能单独存在。
Colgroup 是 HTML5 中专门用于批量定义表格列样式（尤其是宽度）的语义化标签，它不渲染可见内容，但能高效统一控制一列或多列的 width、background、border 等 CSS 属性（注意：仅部分样式生效，且需配合正确结构）。
colgroup 必须配合 col 和 table 使用
单独写 <colgroup></colgroup> 不起作用。标准结构是：
- 表格必须有
<table> 标签 <li> <code><colgroup></colgroup>必须放在<thead> 或表格开头（紧挨 <code><table> 后，或在 <code><caption></caption>之后） - 每列控制用
<col>子标签，可设span属性合并多列，也可用内联style或 class 控制样式
用 col 定义单列或连续多列宽度
以下示例中，第1列宽 120px，第2–3列共宽 200px（即每列约 100px，除非指定 table-layout: fixed）：
| 姓名 | 年龄 | 城市 |
|---|---|---|
| 张三 | 28 | 北京 |
CSS 宽度控制更稳定，推荐结合使用
仅靠 <col> 的 width 属性兼容性有限（尤其在复杂内容下易被内容撑开）。真正可靠的方式是：
- 给
<col>添加 class，再用 CSS 设置width - 必须设置
table { table-layout: fixed; }，否则列宽由内容决定，<col>的宽度会被忽略 - 可对
<col>设置背景色、边框（需配合border-collapse: collapse），但文字对齐、颜色等样式需作用于td/th
常见误区与注意事项
注意：colgroup 不支持设置字体、颜色、padding、text-align 等单元格级样式；它只影响列的“骨架”属性（宽度、背景、边框）。若需为不同列设置文字右对齐或灰色背景，应写成：
<colgroup> <col class="col-name"> <col class="col-age"> <col class="col-city"> </colgroup>
然后在 CSS 中：
col.col-age, col.col-city { background: #f9f9f9; }
td:nth-child(2), th:nth-child(2) { text-align: right; }
td:nth-child(3), th:nth-child(3) { color: #666; }
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
