<colgroup> 是唯一能批量控制表格列宽和背景色的原生方式，但对 color、font-size 等文本样式无效；其 width 优先级高且稳定，background-color 易被单元格覆盖；span 不匹配会静默失效；搭配 table-layout: fixed 时需显式设 width，否则列宽可能为 0。
<colgroup> 是唯一能批量控制表格列级样式的原生 HTML 方式，但它不是万能的——很多样式写上去没反应，不是你代码错了，是浏览器根本不支持。
为什么 <col> 设置 color 或 font-size 无效
因为 <col> 只继承极少数 CSS 属性，color、font-size、text-decoration 这类文本属性完全被忽略。它只对 width、background-color、border（部分浏览器）、text-align（仅部分生效）等有限属性起作用。
-
background-color在大多数现代浏览器中可用，但会被<td>自身的背景色直接覆盖 -
width生效稳定，且优先级高于<td>的width（前提是没设table-layout: fixed） -
border在 Firefox 中基本无效，在 Chrome/Edge 中仅对列左右边框有微弱表现 - 想让文字居中？别依赖
<col>的text-align，老老实实写在<th>和<td>上
span 属性和列数量不匹配时的隐性 bug
当 <col> 带 span="3"，但实际表格只有 2 列，浏览器不会报错，也不会警告——它会静默忽略这个 <col>，后续的列样式可能全部错位。
- 务必确保所有
<col>的span总和等于表格总列数 - 用 JavaScript 校验：
document.querySelectorAll('col').reduce((sum, c) => sum + (parseInt(c.span) || 1), 0)应等于document.querySelector('tr').cells.length - 如果表格动态生成（比如 Vue/React 渲染），
<colgroup>必须同步更新，否则样式“漂移”
和 table-layout: fixed 搭配使用时的宽度陷阱
启用 table-layout: fixed 后，列宽完全由 <col> 或第一行 <th>/<td> 决定，后续单元格内容再长也不会撑开列宽——这看似可控，实则埋雷。
立即学习“前端免费学习笔记（深入）”；
- 如果某列
<col>没设width，该列宽度会变成 0（尤其在 Safari 中） -
width: auto在<col>上无效，只能用具体值（px、%、em） - 百分比宽度按表格容器计算，不是按内容；若容器宽度未定（如 flex 子项），结果不可预测
- 响应式场景下，建议用
min-width+max-width组合，而不是纯width
真正关键的点是：<colgroup> 不是样式捷径，而是结构声明。它只管“这一列该有多宽、底色是什么”，其余一切——字体、对齐、边框、悬停、响应式断点——都得回到 <th> 和 <td> 上去补全。
