table 的 background-color 仅在 border-spacing 空隙中可见，因 td/th 默认覆盖其背景；推荐用 tbody 或 tr 设置背景，更稳定可控。
background-color 在 <table> 上不生效？不是写法错，是渲染层被盖住了。
<h3>为什么 <code>table 的 background-color 看不见
浏览器把 <td> 和 <code><th> 当作「前景图层」，哪怕它们只是 <code>background-color: transparent，也会挡住表格本身的背景色。常见表现包括：
- 加了
style="background-color: #eee"没反应 - 开发者工具里看到样式没被划掉，但预览就是白底
- 只在单元格之间留出的空隙（
border-spacing）里能看到表格背景
临时验证方法：td, th { background-color: transparent !important; } —— 如果这时背景突然出来了，就确认是子元素覆盖问题。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
border-collapse: collapse 会吃掉表格背景
当设置 border-collapse: collapse 后，border-spacing 变为 0，单元格之间没空隙了，而 <table> 的背景又完全被 <code><td> 覆盖，结果就是整个表格看起来「没背景」。
<ul><li>想让 <code><table> 背景可见，要么保留 <code>border-spacing（比如设为 2px），要么改用 tbody 或 tr 控制背景
tbody { background-color: #f9f9f9; } 是更稳妥的选择：它不会被 td 完全覆盖，且能填满整行区域thead + tbody 结构，thead 和 tbody 的背景会各自独立渲染，可分别设色class 比内联 style 更可靠
直接写 <table style="background-color: red"> 看似快，但容易被后续 CSS 打断：
<ul>
<li>比如页面加载了某个 UI 框架，它可能带 <code>table td { background: white; }，就把你的内联背景盖掉了
!important 强行生效，说明样式冲突已失控，不该作为常规方案<table class="table-striped">，再在 CSS 里定义 <code>.table-striped { background-color: #f5f5f5; }
tableEl.classList.toggle('dark-bg')，比反复操作 style.backgroundColor 更稳定哪些地方设背景色最有效
表格背景不是单一层级，选对目标元素才能控制实际显示效果：
<table>：只在 <code>border-spacing区域可见，适合做「底纹衬托」<tbody> / <code><thead>：块级容器，背景会铺满其内容区，无间隙干扰，推荐优先用 <li><code><tr>：整行背景，适合隔行变色（<code>tr:nth-child(even)），但注意它不覆盖border-spacing<td> / <code><th>：最细粒度控制，但设太多会覆盖上级背景，慎用 <p>真正容易被忽略的是：你看到的「表格背景」，大概率不是 <code><table> 的，而是 <code><tbody> 或某一层 <code><tr> 的。打开开发者工具，挨个点，看哪一层的 <code>background-color实际在起作用——别猜，要看渲染树。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
