tr 的 background-color 不显示，主因是子元素 td/th 背景覆盖或 border-collapse 导致渲染遮挡；需设子元素背景透明、检查层叠顺序并用开发者工具定位真实生效样式。
直接用 background-color 设置 tr 元素的 CSS 样式，而不是 bgcolor 属性——后者在 HTML5 中已完全不合法，且现代项目中会触发校验警告或被构建工具拦截。
tr background-color 为什么有时不显示
最常见的情况不是写错了样式，而是被子元素“盖住”了：
-
th或td自身设置了background-color，且不透明（opacity: 1），会完全遮挡tr的背景色 - 表格用了
border-collapse: collapse，旧版 IE（ - CSS 选择器权重不够，比如
tbody tr:nth-child(even)比tr.highlight权重高，后者的样式就被覆盖了
调试时打开 DevTools，检查该 tr 元素的 Computed Styles 面板，确认 background-color 是否计算为有效值；再点开 td 子元素，看它的 background-color 是否非 transparent。
内联 style vs class 写法怎么选
两种都可行，但适用场景不同：
立即学习“前端免费学习笔记（深入）”；
- 临时调试或单页静态内容：用
<tr style="background-color: #e6f7ff;">最快，不用切文件、不担心类名冲突 - 需要复用、主题切换、响应式变色（如深色模式）、或配合 JS 动态增删状态：必须用
class，例如<tr class="status-success">，再配 CSS 规则.status-success { background-color: #d4edda; } - 避免用
background简写（如background: #fff url(...) no-repeat），它可能意外清掉background-image或重置其他背景属性；只改颜色就明确写background-color
隔行变色和 hover 高亮的实用写法
这类效果别手动加 class，CSS 伪类更简洁可靠：
- 隔行变色（奇偶行）：
tbody tr:nth-child(odd) { background-color: #fafafa; }—— 注意加tbody前缀，避免影响thead或tfoot - 鼠标悬停高亮：
tr:hover { background-color: #d6eaff !important; }—— 加!important是为了压过某些框架（如 Bootstrap 表格）里给td设的默认背景 - 如果表格由 React/Vue 渲染，优先用
:class="{ 'selected': row.isSelected }"绑定，而非直接操作style，否则难以响应式更新且破坏 SSR 一致性
打印样式和透明度容易被忽略
很多团队只在屏幕样式上测试，上线后发现导出 PDF 或打印时背景全没了：
- 浏览器默认禁用打印背景色（Chrome/Firefox 均如此），需显式开启：
@media print { * { -webkit-print-color-adjust: exact; color-adjust: exact; } } - 若用
rgba(230, 247, 255, 0.8)这类带透明度的颜色，tr背景会和td内容叠加出意外灰度，尤其在打印时更明显；纯色优先用十六进制或命名色 - 真正难调的不是“怎么加背景”，而是“加完之后，在所有设备、所有导出通道、所有子元素叠加层级下，是否仍按预期呈现”——这点比语法本身重要得多。
