HTML表格如何实现隔行换色效果（代码示例）

直接用 tr:nth-child(odd) 和 tr:nth-child(even) 实现隔行变色，需确保 tbody 显式包裹数据行；thead 会干扰计数，应改用 tbody tr:nth-child(odd)；IE8 及以下需 JS fallback；深色模式下须配合 prefers-color-scheme 适配背景色。

用 nth-child(odd) 和 nth-child(even) 最直接

现代浏览器都支持，不需要 JS，纯 CSS 就能搞定。关键是选对伪类：表格行用 tr 作为目标，不是 tbody 或 table。

常见错误是写成 table:nth-child(odd) —— 这匹配的是 table 元素本身在父容器里的位置，完全无效。

• 正确写法：tr:nth-child(odd) { background-color: #f5f5f5; }
• 如果表格有 thead，nth-child 会把表头行也计入计数，导致第一行数据变色异常；此时改用 tbody tr:nth-child(odd) 更稳妥
• 颜色值建议用十六进制或 rgba，避免用命名色（如 lightgray），部分老浏览器解析不一致

IE8 及更老浏览器必须用 JS 模拟

nth-child 在 IE8 及以下完全不支持，如果仍需兼容，得靠脚本手动加 class。

最简方案是遍历 tbody 下所有 tr，给奇数索引的行加 class="odd"，再用 CSS 定义样式：

立即学习“前端免费学习笔记（深入）”；

tbody tr:nth-child(odd) { background-color: #f9f9f9; }tbody tr:nth-child(even) { background-color: #ffffff; }/* IE8 fallback */tbody tr.odd { background-color: #f9f9f9 !important; }

注意：!important 是为了覆盖可能存在的内联样式或更高优先级规则，但仅限 fallback 场景下使用。

用 tbody 包裹数据行是必要前提

很多手写的 HTML 表格漏掉 tbody，直接写 table > tr。这会导致两个问题：

• 浏览器会自动补全 tbody，但补全时机和规则不统一，nth-child 计数可能意外包含 thead 或 tfoot
• JS 操作时，table.tBodies[0].rows 无法访问到没被包裹的行
• 语义化缺失，影响可访问性（screen reader 可能跳过无结构的行）

务必显式写出 <tbody></tbody>，哪怕里面只有一行。

深色模式下背景色要同步适配

隔行色在深色主题里容易失效——比如浅灰背景在深色模式下变成难辨别的暗灰。不能只靠 CSS 变量“一劳永逸”。

• 推荐用 color-scheme: light dark 配合 @media (prefers-color-scheme: dark)
• 避免用 background-color: #fff 这类硬编码值，改用 Canvas 或 CanvasText 等系统色关键词（需确认浏览器支持度）
• 更稳的做法是监听 prefers-color-scheme 变化，用 JS 切换 class，再由 CSS 控制两套配色

真正麻烦的不是加一行样式，而是保证它在不同上下文里都不突兀——比如嵌入 iframe、被 shadow DOM 隔离、或跟第三方 UI 库共存时，选择器作用域和优先级容易失控。