colgroup和col标签用于声明表格列结构并批量控制列样式，仅支持width、background-color、border、visibility: collapse等有限CSS属性，不渲染内容，必须置于caption后、thead前，且col数量须与实际列数严格匹配。
colgroup 和 col 标签到底起什么作用
colgroup 不是视觉容器，也不影响 DOM 结构，它纯粹是为表格列提供样式代理和宽度控制入口。浏览器会把 col 元素的样式（比如 width、background、border）“透传”到对应列的每个 td 和 th 上——但仅限于部分 CSS 属性。很多开发者试了 color 或 font-size 没反应，就是因为这些属性不被 col 支持。
- 只有少数 CSS 属性生效：
width（最常用）、background、border、visibility -
col无法设置文字相关样式（color、text-align、font等），得靠td/th或tbody tr td:nth-child(n)补齐 -
colgroup的span属性可合并多列定义，比如<col span="3">相当于连续三个<col>
为什么设置了 width 却没生效
常见现象：写了 <col width="120">，但表格列宽还是被内容撑开。根本原因是 CSS width 优先级低于内容自动伸缩逻辑，尤其在没有明确布局模式时。
- 必须配合
table { table-layout: fixed; }才能强制按col宽度渲染 - 如果用百分比（如
width="20%"），父容器需有明确宽度，否则百分比计算失效 -
col的width属性是 HTML 属性，不是 CSS；若用 CSS 写col { width: 120px; }，多数浏览器忽略（仅 Firefox 部分支持）
<table style="table-layout: fixed; width: 600px;">
<colgroup>
<col width="150">
<col width="200">
<col width="auto"> <!-- 剩余空间由这列自适应 -->
</colgroup>
<thead><tr><th>A</th><th>B</th><th>C</th></tr></thead>
<tbody><tr><td>长文本会换行，不会撑宽</td><td>OK</td><td>OK</td></tr></tbody>
</table>colgroup 能不能动态控制某几列显示/隐藏
可以，但要注意 visibility: collapse 和 display: none 的行为差异：
-
col { visibility: collapse; }：列隐藏且不占空间，相邻列自动填补空隙（这是唯一推荐方式）立即学习“前端免费学习笔记（深入）”；
col { display: none; }：无效，col元素不支持display属性JS 动态操作时，直接改
col.style.visibility = 'collapse'即可，无需操作所有单元格注意：如果表格用了
table-layout: auto，visibility: collapse可能不触发重排，务必搭配fixed模式隐藏后，
th/td的:nth-child()伪类序号不变，仍按原始列数计数
colgroup 在现代项目里还值得用吗
值得，但只在特定场景下有不可替代性：
- 需要统一控制几十列的宽度或背景色（比如报表、Excel 导出预览），比写几十条
td:nth-child(n)更轻量、语义更清 - SSR 渲染或静态 HTML 中，避免 JS 注入样式带来的 FOUC
- 与
table-layout: fixed配合做高性能大表格（冻结列、虚拟滚动底层常依赖col宽度快取）
但别指望它替代 CSS Grid 或前端表格组件。复杂交互、排序、筛选、响应式断点等，colgroup 无能为力。它只是 HTML 表格原生能力中，唯一能跨行批量影响列样式且不增加 DOM 节点的机制——这个定位没变，也很难被取代。
真正容易被忽略的是：哪怕只用一次 col，整个表格都必须加 table-layout: fixed，否则大部分效果形同虚设。
