table 的 background-color 看不见是因为 td/th 默认遮挡其背景色，即使设为 transparent；应将背景色设在 tbody、tr 或单元格上，并确保与文字颜色满足 wcag 对比度要求（普通文本≥4.5:1），同时配合 border-collapse: collapse 消除缝隙，推荐用 class 而非 style 动态控制。
为什么 table 的 background-color 看不见？
不是你写错了，是 td 和 th 默认会盖住 table 的背景色。哪怕它们的 background-color 是 transparent，渲染层也处于上层——你看到的“背景”，大概率根本不是 table 的。
验证方法：临时加一条 CSS：td, th { background-color: transparent !important; }。如果这时 table 的背景突然显示出来，就确认是子元素遮挡问题。
真正该设背景色的地方是 tbody 或 tr，而不是 table。因为 tbody 是块级容器，背景能铺满整行区域且不被单元格覆盖；tr 适合隔行变色；单个单元格高亮则直接作用于 td 或 th。
怎么让背景色和文字颜色（前景色）对比足够强？
关键不是随便选两个颜色，而是确保可读性达标。WCAG 2.1 要求普通文本对比度 ≥ 4.5:1，大号文本（≥18pt 或加粗 ≥14pt）≥ 3:1。
- 别用
background-color: #fff+color: #ccc—— 对比度只有 1.5:1，完全不可读 - 推荐组合：
background-color: #f9f9f9+color: #333（对比度 ≈ 12:1）；或background-color: #e3f2fd+color: #1976d2（蓝底深蓝字，对比度 ≈ 5.2:1） - 用在线工具验证：如 WebAIM Contrast Checker，输入十六进制色值即可
- 避免在深色背景上用纯白文字（
#ffffff），容易眩光；改用#f0f0f0或#e0e0e0更柔和
border-collapse: collapse 为什么必须配 background-color？
默认表格是 border-collapse: separate，单元格之间有空隙（由 border-spacing 控制）。这时即使给 td 设了背景色，也会被白色缝隙割裂，视觉上像“没填满”。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
border-collapse: collapse 合并边框后，缝隙消失，背景色才能真正连续铺开——这对对比度感知影响很大：割裂的浅色背景会让深色文字显得更“跳”，而连贯背景才能稳定呈现设计意图。
务必在 table 上显式设置：<table style="border-collapse: collapse;">；若用外部 CSS，建议全局声明：<code>table { border-collapse: collapse; }。
动态改背景色时，class 比 style.backgroundColor 更可靠
用 JavaScript 直接操作 element.style.backgroundColor = 'red' 容易被后续 CSS 规则覆盖（比如框架自带的 table td { background: white; }），而且无法继承、难调试。
正确做法是切换 class：
- 定义 CSS：
.status-error { background-color: #ffebee; color: #c62828; } - JS 中：
cell.classList.add('status-error')或cell.classList.toggle('status-error') - 这样既能保证样式优先级可控，又方便统一调整颜色、文字色、padding 等配套属性
真正容易被忽略的是：背景色和前景色从来不是孤立设置的。你改了 td 的背景，就得同步检查它是否继承了父级 tr 或 tbody 的 color，否则可能文字突然变灰、变淡、甚至看不见。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
