斑马纹最稳妥方案是用tr:nth-child(odd/even)设置背景色，必须显式写出tbody以避免thead干扰；IE8需JS或服务端加class兼容；禁用background-image模拟。
用 nth-child(odd) 和 nth-child(even) 最直接
斑马纹本质就是奇偶行不同背景色，CSS 里最稳妥的方式是用伪类选择器。现代浏览器（包括 IE9+）都支持，不用 JS、不依赖表格结构是否含 thead 或 tfoot。
关键点：必须作用在 tr 上，而不是 td 或整个 table；否则容易被内联样式或更具体的选择器覆盖。
-
tr:nth-child(odd)匹配第 1、3、5… 行（注意：从表格第一行开始算，不管是不是thead） -
tr:nth-child(even)匹配第 2、4、6… 行 - 如果表格有
thead，且你只想给tbody里的行加斑马纹，得写成tbody tr:nth-child(odd) - 颜色建议用半透明白色/灰色（如
rgba(245, 245, 245, 0.8)），避免和边框或文字对比过强
table tr:nth-child(odd) { background-color: #f9f9f9; }
table tr:nth-child(even) { background-color: #fff; }
IE8 及更老浏览器不支持 nth-child 怎么办
真要兼容 IE8，只能靠 JS 或服务端渲染 class。纯 CSS 无解——:nth-child 在 IE8 完全无效，:first-child 等也靠不住（尤其有 thead 时）。
轻量级方案：给每行手动加 class（开发时生成，或用简单脚本补）：
- 服务端模板中循环时判断索引，输出
class="row-odd"或class="row-even" - 前端 JS 补充（仅当必须支持旧 IE 时）：
document.querySelectorAll('tbody tr').forEach((tr, i) => { tr.classList.toggle('odd', i % 2 === 0); }); - 别用 jQuery 的
:even/:odd伪类——它在 IE8 下行为不稳定，且依赖 jQuery 版本
tbody 必须显式写出，否则 nth-child 会误算表头行
HTML 规范允许省略 tbody，浏览器会自动补上。但 CSS 选择器计算时，tr:nth-child(odd) 是按 DOM 树里的实际位置算的。如果没写 tbody，而写了 thead，那么 thead tr 会占掉第 1 行，导致第一行 tbody tr 变成 nth-child(2)，斑马纹错位。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 错误写法（斑马纹从第二行开始变色）：
Name Alice Bob - 正确写法（显式包裹
tbody，确保选择器只作用于数据行）：Name Alice Bob
用 background-image 模拟斑马纹？没必要，还容易出问题
有人用线性渐变做条纹背景（如 background-image: linear-gradient(...)），看似“一行代码搞定”，但实际坑多：
- 高度固定才可控，表格行高动态变化时条纹会错位或拉伸
- 无法单独控制奇偶行文字颜色或 hover 效果
- 和
border-collapse: collapse配合时，边框可能盖住渐变边缘 - 可访问性差：屏幕阅读器不感知背景图，但语义上奇偶行差异对部分用户有辅助意义
除非你在做极简静态报表且完全放弃交互与适配，否则老实用 nth-child。
真正要注意的其实是 tbody 是否存在、是否被显式声明——这点比选哪个 CSS 属性更容易被忽略，而且一旦出错，调试时很难一眼发现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
