Tailwind 无内置 table-striped 因其原子化设计，需用 odd:bg-gray-50 和 even:bg-white 组合实现隔行变色，且必须作用于 tbody > tr 元素。
直接用 table-striped 类就行，但得确认你用的是 Bootstrap 而不是 Tailwind —— Tailwind 默认不提供这个类，得自己配。
为什么 Tailwind 没有内置 table-striped？
Tailwind 是原子化 CSS 框架，不预设语义化组件类（比如 .table-striped），所有样式都靠组合基础类实现。它默认只提供 odd: 和 even: 变体，但这些变体仅作用于元素自身，不能直接写在 tr 上生效——因为 tr 的父容器是 tbody，而 odd: 变体依赖父容器的子元素索引，必须确保选择器能正确命中 tbody > tr 结构。
-
odd:bg-gray-50和even:bg-white必须加在tr元素上，且 HTML 中tr必须是tbody的直系子元素 - 如果省略
tbody标签，浏览器会自动补全，但 Tailwind 的变体仍能工作（现代浏览器 DOM 补全后结构一致） - 若表格含
thead，odd:仍按tbody内部顺序计数，不会被thead > tr干扰 —— 这点和纯 CSS:nth-child()不同，Tailwind 的变体是基于实际渲染节点位置，而非整个 table 的 DOM 序号
怎么写才真正生效？
最简可靠写法是给每个 tr 同时加上 odd:bg-gray-50 和 even:bg-white，并确保它们在 tbody 下：
<table class="min-w-full">
<thead>
<tr><th>Name</th></tr>
</thead>
<tbody>
<tr class="odd:bg-gray-50 even:bg-white">
<td>Alice</td>
</tr>
<tr class="odd:bg-gray-50 even:bg-white">
<td>Bob</td>
</tr>
</tbody>
</table>
- 别把
odd:/even:加在tbody或table上 —— 它们只对直系子元素有效 - 如果用了
border-collapse: collapse，记得同时设td, th的背景为transparent，否则单元格背景会盖住行背景 - 悬停高亮需提高优先级：
hover:bg-blue-50通常够用；若被其他样式覆盖，可加!important（Tailwind 支持hover:!bg-blue-50）
动态增删行时要注意什么？
Tailwind 的 odd:/even: 是静态编译的，不随 DOM 变化重算 —— 它只是生成对应 CSS 规则，最终行为仍由浏览器的 :nth-child() 实现。所以只要 HTML 结构合规（tbody > tr），新增或删除 tr 后，隔行色会自动重排，无需 JS 干预。
立即学习“前端免费学习笔记（深入）”；
- 但如果你用 JS 把
tr插入到thead或tfoot，或跨tbody移动，就会破坏顺序，导致错位 - 避免用
colspan跨多列的tr混在数据行中间 —— 视觉节奏被打乱时，隔行色反而降低可读性 - 真要支持复杂编辑场景（如拖拽排序、分页加载），建议改用 CSS 变量 +
:nth-child()原生方案，更可控
最容易被忽略的一点：Tailwind 的 odd:/even: 变体在 JIT 模式下，只有当类名在源码中字面量出现时才会生成。如果通过字符串拼接动态写 class="odd:bg-gray-50"，构建时可能被剔除 —— 需提前加入 safelist 或改用 @layer 显式声明。
