Bootstrap 5 表格条纹用 table-striped 类，仅作用于 tbody 内偶数行，需确保结构正确、CSS 加载无冲突且与 table 类共存，自定义推荐直接写 CSS 而非修改类。
Bootstrap 5 表格条纹背景用 table-striped 类就行
直接给 <table> 标签加 <code>table-striped 类，bootstrap 就会自动给偶数行（tbody > tr:nth-of-type(odd)）加上浅灰背景。注意：它只作用于 tbody 内的行，thead 和 tfoot 不受影响。
常见错误是手动写 CSS 覆盖了默认样式，或者忘了引入 Bootstrap CSS 文件——条纹效果完全依赖其内置样式表，不写 JS、不调函数。
- 必须确保使用的是 Bootstrap 5（或 4），v3 的类名相同但底层选择器略有差异
- 如果表格用了
table-dark，条纹色会变深，不是“白底灰条”，而是“黑底更暗条” - 自定义主题时，
$table-striped-bgSass 变量可改颜色，但直接改 CSS 更快
为什么有时候条纹不显示？检查这三处
最常踩的坑不是类名写错，而是结构或加载问题：
<tr> 没包在 <code><tbody> 里——Bootstrap 条纹只选 <code>tbody > tr，写成<table><tr><td> 直接失效 <li>用了 <code>table-hover或table-bordered却没加table基础类——table-striped必须和table类共存才生效- CSS 加载顺序不对，比如自己写的
tr { background: none !important }强制清掉了条纹背景 - 换条纹色：覆盖
.table-striped > tbody > tr:nth-of-type(odd)的background-color - 只给前 5 行加：用
tbody > tr:nth-of-type(odd):nth-child(-n+10) - 隔两行一纹（每三行一色）：改用
tr:nth-of-type(3n+1)，但得删掉table-striped避免冲突 - Vue 的
v-for如果把<tr> 包在 <code><template></template>里，要确认编译后<tr> 确实落在 <code><tbody> 内部 <li>服务端渲染（SSR）时若初始 HTML 没带 <code>table-striped类，首屏可能无条纹——确保 class 字符串随组件一起输出
快速验证：打开 DevTools，看偶数行 <tr> 元素是否被匹配到 <code>.table-striped > tbody > tr:nth-of-type(odd) 这条规则。
想换颜色或只对某几行加条纹？别硬改 table-striped
这个类是全局批量控制的，不适合微调。真要定制，推荐直接写轻量 CSS：
别试图用 JS 动态加 class 控制条纹——性能差，且破坏语义；CSS 伪类足够稳又轻量。
Vue/React 里动态渲染表格，条纹还有效吗？
只要最终 HTML 结构是标准的 <table class="table table-striped"><tbody><tr><td>，就完全没问题。框架不影响 CSS 选择器匹配。
<p>容易忽略的点：</p>
<ul><li>React 中用 <code>map() 渲染 <tr> 时，别漏写 <code>key，否则可能触发重排导致样式闪烁（不是条纹失效，但看着像）
条纹本质是纯 CSS 行为，和框架生命周期无关，关键永远落在最终生成的 DOM 结构上。
