bgcolor属性在现代浏览器中完全无效，应使用CSS的background-color设置表格背景；tbody或thead是最稳妥的选择，可避免td/th覆盖和border-spacing干扰。

bgcolor 属性在现代浏览器中完全无效，别再试了。直接写 bgcolor="red" 不会报错，但也不会变色——Chrome、Firefox、Edge 都会静默忽略它。

为什么 table 上的 background-color 看不见

不是代码写错了，是渲染顺序导致的：浏览器默认把 td 和 th 当作「前景层」，哪怕它们没设背景，实际也等效于 background-color: transparent，会挡住 table 的背景色。常见现象包括：

• 开发者工具里样式没被划掉，但页面就是白底
• 只在单元格间隙（border-spacing）里看到一点点颜色
• 加了 border-collapse: collapse 后，整个表格背景彻底消失

验证方法：临时加一条 CSS：td, th { background-color: transparent !important; }，如果这时背景突然出来了，就确认是子元素覆盖问题。

真正生效的背景设置位置

想让背景色稳定显示，得选对目标元素。按优先级推荐：

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• tbody 或 thead：块级容器，背景铺满整块内容区，不受 border-spacing 干扰，最稳妥
• tr：适合隔行变色（如 tr:nth-child(even)），但注意它不覆盖边框间隙
• td/th：最细粒度控制，适合高亮单个单元格，但设多了容易覆盖上级背景

例如，给整张表加浅蓝底色，用这个更可靠：

A

B

内联 style vs class：维护性差异很大

直接写 虽快，但一改全改，且极易被其他 CSS 打断（比如某个 UI 框架自带的 table td { background: white; }）。

• 推荐统一用 class：，然后在 CSS 中定义 .data-table tbody { background-color: #f9f9f9; }
  需要动态切换？用 JS 操作 class：tableEl.classList.toggle('dark-bg')，比反复改 style.backgroundColor 更稳定
  如果必须用内联，记得加 !important 是样式冲突失控的信号，不该是常规方案

  最容易被忽略的一点：你眼睛看到的「表格背景」，大概率不是 table 的，而是 tbody 或某一层 tr 的。打开开发者工具，挨个点，看哪一层的 background-color 实际在起作用——别猜，要看渲染树。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！