table 的 background-color 不生效是因为 td/th 背景覆盖了表格背景；需检查子元素背景、使用 border-collapse 控制间隙、优先用 class 管理样式并借助开发者工具定位真实渲染层。
table 元素的 background-color 不生效？检查是否被子元素覆盖
直接给 <table> 设置 <code>background-color 有时看起来没反应，大概率是 <td> 或 <code><th> 自带的背景色（比如默认透明但被父容器或 CSS 重置影响）盖住了。浏览器渲染时，单元格会「叠在」表格背景之上，哪怕它只是 <code>background-color: transparent，也可能因继承或层叠顺序导致表格底色不可见。
- 先确认所有
<td>、<code><th> 没有显式设置 <code>background-color（包括通过类名或全局样式） - 临时加一句
td, th { background-color: transparent !important; }排查干扰 - 用浏览器开发者工具「检查元素」，点中
<table>，看右侧样式面板里 <code>background-color是否被划掉、是否被更高优先级规则覆盖CSS 中 table 背景色设置的三种有效层级
表格背景不是单一层级，改对地方才起作用。最常用且可控的是这三处：
-
table：控制整个表格容器区域的背景（含单元格之间的border-spacing空隙） -
tbody/thead/tfoot：适合按区块着色，比如表头深色、数据区浅色 -
tr：整行背景，常用于隔行变色（tr:nth-child(even)），但注意它不会填满border-spacing间隙
示例：
table { background-color: #f5f5f5; }<br>tbody tr:hover { background-color: #e8f4ff; }<br>th { background-color: #2c3e50; color: white; }border-collapse: collapse 影响背景色显示效果
当表格使用
border-collapse: collapse（合并边框模式），table的background-color只会在边框「之外」和单元格内容「之下」可见；而border-collapse: separate（默认）下，table背景会出现在单元格间隙中——这点常被忽略。立即学习“前端免费学习笔记（深入）”；
- 想让背景均匀铺满无空隙，用
border-collapse: collapse+ 给td/th单独设背景 - 想保留间隙并让表格底色透出来，保持
separate并确保td是transparent - 别混用：比如
collapse下还依赖间隙显示表格背景，结果就是背景「消失」
内联 style 和 class 冲突时谁赢？
写成
<table style="background-color: red"> 看似简单，但一旦页面上有更具体的选择器（比如 <code>table.my-table { background-color: blue; }），内联样式虽然权重高，却可能被!important打败，或者被后续加载的 CSS 覆盖（尤其用 JS 动态插入样式时）。- 优先用 class 控制背景色，方便复用和维护
- 调试阶段可临时用内联
style快速验证，但上线前应移除 - 如果必须用
!important强制生效，说明样式结构已混乱，建议回溯源头清理冲突规则
真正难的不是写哪一行 CSS，而是搞清当前表格 DOM 结构里，哪一层背景实际在渲染、哪一层被遮住了——多点两下开发者工具比查文档更快。
-
