table 的 background-color 仅在 border-spacing 空隙中可见，因 td/th 默认覆盖其背景；推荐用 tbody 或 tr 设置背景，更稳定可控。
background-color 在 <table> 上不生效？不是写法错，是渲染层被盖住了。
为什么 table 的 background-color 看不见
浏览器把 <td> 和 <th> 当作「前景图层」，哪怕它们只是 background-color: transparent，也会挡住表格本身的背景色。常见表现包括：
- 加了
style="background-color: #eee"没反应 - 开发者工具里看到样式没被划掉，但预览就是白底
- 只在单元格之间留出的空隙（
border-spacing）里能看到表格背景
临时验证方法：td, th { background-color: transparent !important; } —— 如果这时背景突然出来了，就确认是子元素覆盖问题。
border-collapse: collapse 会吃掉表格背景
当设置 border-collapse: collapse 后，border-spacing 变为 0，单元格之间没空隙了，而 <table> 的背景又完全被 <td> 覆盖，结果就是整个表格看起来「没背景」。
立即学习“前端免费学习笔记（深入）”；
- 想让
<table>背景可见，要么保留border-spacing（比如设为2px），要么改用tbody或tr控制背景 -
tbody { background-color: #f9f9f9; }是更稳妥的选择：它不会被td完全覆盖，且能填满整行区域 - 注意：如果用了
thead+tbody结构，thead和tbody的背景会各自独立渲染，可分别设色
class 比内联 style 更可靠
直接写 <table style="background-color: red"> 看似快，但容易被后续 CSS 打断：
- 比如页面加载了某个 UI 框架，它可能带
table td { background: white; }，就把你的内联背景盖掉了 -
!important强行生效，说明样式冲突已失控，不该作为常规方案 - 推荐统一用 class：
<table class="table-striped">，再在 CSS 里定义.table-striped { background-color: #f5f5f5; } - 需要动态改背景？用 JS 切换 class：
tableEl.classList.toggle('dark-bg')，比反复操作style.backgroundColor更稳定
哪些地方设背景色最有效
表格背景不是单一层级，选对目标元素才能控制实际显示效果：
-
<table>：只在border-spacing区域可见，适合做「底纹衬托」 -
<tbody>/<thead>：块级容器，背景会铺满其内容区，无间隙干扰，推荐优先用 -
<tr>：整行背景，适合隔行变色（tr:nth-child(even)），但注意它不覆盖border-spacing -
<td>/<th>：最细粒度控制，但设太多会覆盖上级背景，慎用
真正容易被忽略的是：你看到的「表格背景」，大概率不是 <table> 的，而是 <tbody> 或某一层 <tr> 的。打开开发者工具，挨个点，看哪一层的 background-color 实际在起作用——别猜，要看渲染树。
