推荐用 Tailwind 内置 odd/even 变体实现斑马纹，如 odd:bg-gray-50 even:bg-gray-100；需确保 tr 是 tbody 的直接子元素，避免条件渲染干扰序号；支持 dark mode 和 tree-shaking，禁用手写 nth-child。
用 odd 和 even 变体直接写斑马纹，别碰 :nth-child()
Tailwind 默认就支持表格行的奇偶样式，odd:bg-gray-50 和 even:bg-gray-100 是最轻量、最可靠的方式。它本质是生成带 :nth-child(odd) 的 CSS 规则，但你完全不用手写选择器，也不用担心伪类优先级打架。
常见错误是手动加 class="odd:bg-gray-50" 到 <tr> 上——这没用，因为 odd 是变体，只对父容器下“真正第奇数个子元素”生效，必须作用在 <tr> 自身，且父容器（比如 <tbody>）不能有其他干扰子节点（如注释、空格文本节点在某些渲染模式下也可能干扰）。
- 确保
<tr>是<tbody>的**直接子元素**，中间不要插<div>或条件渲染残留的空节点 - 如果用了 React/Vue，检查是否因条件渲染（如
v-if或&&表达式）导致部分<tr>被跳过，破坏了自然序号 - 不要给
<thead>或<tfoot>的<tr>加odd/even，它们不参与 tbody 内的计数
为什么不用自定义 :nth-child(2n+1) 类？
有人会新建一个 tw-zebra-odd 类，里面写 tr:nth-child(2n+1) { background-color: #f9fafb; }。这看似灵活，实则埋雷：
- Tailwind 的
odd变体自动加了!important（可配），而手写 CSS 没这层保护，容易被组件库或重置样式覆盖 - 手写选择器无法响应 dark mode 变体，比如
dark:odd:bg-gray-800会失效 - 打包时 Tailwind 能 tree-shake 未使用的
odd规则；手写 CSS 则永远在 bundle 里
示例对比：
立即学习“前端免费学习笔记（深入）”；
<!-- ✅ 推荐：原生变体，支持暗色模式 --> <tr class="odd:bg-gray-50 even:bg-gray-100 dark:odd:bg-gray-800 dark:even:bg-gray-750">
<!-- ❌ 不推荐：手写 nth-child，不响应变体，易被覆盖 --> <tr class="tw-zebra-odd">
表头固定 + 斑马纹同时存在时的错位问题
当用 sticky 固定表头（thead），又对 tbody tr 用 odd/even，滚动后视觉上可能发现斑马纹“断层”——这是因为 thead 被提到了新层，但 tbody tr 的 nth-child 计数仍从 1 开始，和视觉位置脱节。
- 解决办法不是改计数逻辑，而是让斑马纹**只作用于可见区域内的 tbody 行**：把
odd/even移到<tbody>上，再用子选择器限定 - 正确写法：
<tbody class="odd:>tr:bg-gray-50 even:>tr:bg-gray-100"> - 这样每组
<tbody>（比如分页后重新渲染的块）都独立计数，避免跨块错位
移动端小屏下斑马纹要不要关？
小屏表格常横向滚动，行高压缩，斑马纹反而增加视觉噪音，降低可读性。Tailwind 支持响应式变体，但 sm:odd:bg-transparent 这种写法无效——odd 是伪类变体，不支持断点前缀。
- 正确做法是用媒体查询包裹，或借助
@layer在 CSS 中覆盖 - 更简单的是：用
md:odd:bg-gray-50 md:even:bg-gray-100，即默认关闭，仅中屏及以上开启 - 注意：这要求你在
tailwind.config.js的theme.extend.screens里确认md起始值符合你的设计断点（默认是 768px）
斑马纹不是必须项，它的价值在于长表格快速定位行，一旦行数少于 10 或列被折叠，视觉引导意义就大幅下降。别为了“完整”硬加。
