元素不渲染视觉样式，CSS 规范禁止对其应用 background-color，Chrome、Firefox、Safari 均一致忽略；必须通过 tr > th:nth-child(n), tr > td:nth-child(n) 为单元格设置背景色。
colgroup 里设 background 为什么没反应
浏览器对 <col> 元素的样式支持非常有限，background-color 在 Chrome 和 Safari 中基本不生效（Firefox 部分支持但行为不稳定），这不是你写错了，而是规范和实现层面的现实。真正渲染背景的是 <td> 和 <code><th>，<code><col> 只是结构占位，不参与视觉绘制。
常见错误现象：给 <col style="background: #eee"> 加了样式，表格里完全看不到效果；或者只在 Firefox 里有，换浏览器就消失。
- 能稳定生效的属性极少：只有
width、span（仅影响列数计算）、部分border（极低兼容性） -
color、font-size、text-align等文本类样式在<col>上一律无效 - 如果真要统一背景色，必须落到单元格上，比如用
td:nth-child(2)或加 class 控制
span="3" 是不是能让三列都继承 width 和 background
不是。span 属性只是告诉浏览器“这个 <col> 定义覆盖接下来的 3 列”，但它不会把 width 或 background “复制”或“广播”给后两列。实际效果是：只有第一列应用该 <col> 的 width，后两列回到默认宽度或被后续 <col> 覆盖。
例如：<col width="120" span="3"> 并不等价于三个独立的 <col width="120"> —— 后者才是可预测、可调试、全浏览器一致的做法。
立即学习“前端免费学习笔记（深入）”；
-
span不触发样式继承，只跳过列定义位置 - 列数错位风险高：如果表格实际列数与
span总和不匹配，<colgroup></colgroup>之后的列会失去结构控制 - 调试困难：DOM 中看不到“被 span 覆盖的列”，开发者工具里只能看到一个
<col>节点
怎么让多列拥有相同宽度又保持兼容性
最稳的方式是显式写出每个 <col>，不依赖 span。HTML5 虽然保留了 span，但它的语义是“列定义合并”，不是“样式批量应用”，别把它当 CSS 的 repeat() 用。
示例（推荐）：
<colgroup> <col width="80"> <col width="120"> <col width="120"> <col width="120"> </colgroup>
- IE9+、Chrome、Firefox、Safari 全支持，无渲染差异
- 列数一目了然，增删列时只需同步修改
<colgroup></colgroup>和表头/数据行 - 配合 CSS 更灵活：
<col class="w-120">+.w-120 { width: 120px; } - 避免用内联
width属性，优先走 CSS，方便响应式调整
colgroup 放错位置会导致样式失效吗
会，而且很隐蔽。<colgroup></colgroup> 必须紧接在 <caption></caption>（如果有）之后、任何 <thead> / <code><tbody> / <code><tr> 之前。放错位置不仅样式不生效，还可能被浏览器自动移到 DOM 根部，导致列结构错乱。
<p>典型错误位置：</p>
<ul><li>插在 <code><thead> 里面（<code><thead><colgroup>...</colgroup></thead>）→ 无效，被忽略
<tr> 之后 → 浏览器强行重排，<code><colgroup></colgroup> 可能被移到 <table> 开头，但列数已按原 <code><tr> 解析完毕
<li>多个 <code><colgroup></colgroup> 嵌套或交叉 → HTML 解析器会截断或丢弃正确顺序只有一种：<table>
<caption>...</caption>
<colgroup>...</colgroup>
<thead>...</thead>
<tbody>...</tbody>
</table>。列数必须与所有 <tr> 中的 <code><th>/<code><td> 总数严格一致，差一个都会引发错位。</td>
