最直白且兼容性最好的做法是直接用 style="background-color" 给 <tr> 加背景色，现代浏览器和旧版 IE 均支持；bgcolor 属性已废弃，在 HTML5 中无效且会导致 W3C 验证失败。
直接用 style="background-color" 给 <tr> 加背景色
这是最直白、兼容性最好的做法，现代浏览器和旧版 IE 都支持。别碰已废弃的 bgcolor 属性——它在 HTML5 中无效，连语法校验都会报错。
常见错误现象：写成 <tr bgcolor="#eee">，页面看似生效，但 W3C 验证失败，且某些严格模式下（如 XHTML 或某些 CMS 渲染引擎）会忽略该属性。
- 正确写法：
<tr style="background-color: #f0f9ff;"> - 颜色值可用十六进制（
#e6f7ff）、英文名（lightblue）、RGB（rgb(230, 247, 255)）或 RGBA（rgba(230, 247, 255, 0.8)） - 注意：
<tr>自身不占空间，背景色实际渲染在所有子<td>/<th>上；若单元格有自身background-color，会覆盖行级样式
tr:nth-child(even) 实现隔行变色（斑马纹）
手动给每一行加 style 不现实，尤其数据动态生成时。用 CSS 伪类批量控制更可靠，也便于后期调整主题。
容易踩的坑：只写 tr:nth-child(2n) 而没重置默认边框或内边距，导致颜色被边框“割裂”；或忘记加 border-collapse: collapse，双线边框让背景色看起来断开。
立即学习“前端免费学习笔记（深入）”；
- 基础写法：
tr:nth-child(even) { background-color: #f8f9fa; } tr:nth-child(odd) { background-color: #ffffff; } - 必须配合：
table { border-collapse: collapse; }，否则边框间隙会漏出底色 - 若表格含
<thead>，:nth-child仍按整个<tbody>内的<tr>计数，不是从第 1 行开始重新编号
用 class 控制特定行状态（如警告、高亮、禁用）
当某行代表“错误数据”“当前选中项”或“待审核”，靠颜色传递语义比硬编码颜色值更可持续。
性能影响小，但维护成本差异大：改一个 class 定义就能全局更新所有同类行，而内联样式得逐个改。
- 定义 CSS：
.status-error { background-color: #ffebee; } .status-active { background-color: #e3f2fd; } .status-disabled { background-color: #f5f5f5; opacity: 0.7; } - HTML 中使用：
<tr class="status-error"><td>订单超时</td></tr> - 避免滥用：不要为每种颜色都建一个 class（如
bg-red、bg-blue），应按语义命名，而非视觉特征
为什么 <col> 上设 background-color 不生效
有人试图用 <colgroup><col style="background-color:red"></colgroup> 给整列设背景，结果完全没反应——这不是 bug，是规范行为。
<col> 是元数据容器，不参与渲染；CSS 的 background-color 只对“渲染盒”生效，而 <col> 没有渲染盒。
- 正确替代方案：用
th:nth-child(3), td:nth-child(3)选中第 3 列所有单元格 - 若列数不固定，用
th:last-child, td:last-child或th:nth-last-child(-n+2)（最后两列） - 记住：背景色必须落在
<th>或<td>上，哪怕只是写一条通用规则
rgba() 在老 IE 中不支持，:nth-child 在 IE8 及以下不可用——如果项目还需支持这些环境，就得 fallback 到 JS 动态加 class 或服务端输出 class。 
