Bootstrap 5 表格条纹用 table-striped 类，仅作用于 tbody 内偶数行，需确保结构正确、CSS 加载无冲突且与 table 类共存，自定义推荐直接写 CSS 而非修改类。
Bootstrap 5 表格条纹背景用 table-striped 类就行
直接给 <table> 标签加 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>没包在<tbody>里——Bootstrap 条纹只选tbody > tr，写成<table><tr><td>直接失效 - 用了
table-hover或table-bordered却没加table基础类——table-striped必须和table类共存才生效 - CSS 加载顺序不对，比如自己写的
tr { background: none !important }强制清掉了条纹背景
快速验证：打开 DevTools，看偶数行 <tr> 元素是否被匹配到 .table-striped > tbody > tr:nth-of-type(odd) 这条规则。
想换颜色或只对某几行加条纹？别硬改 table-striped
这个类是全局批量控制的，不适合微调。真要定制，推荐直接写轻量 CSS：
- 换条纹色：覆盖
.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避免冲突
别试图用 JS 动态加 class 控制条纹——性能差，且破坏语义；CSS 伪类足够稳又轻量。
Vue/React 里动态渲染表格，条纹还有效吗？
只要最终 HTML 结构是标准的 <table class="table table-striped"><tbody><tr><td>，就完全没问题。框架不影响 CSS 选择器匹配。
容易忽略的点：
- React 中用
map()渲染<tr>时，别漏写key，否则可能触发重排导致样式闪烁（不是条纹失效，但看着像） - Vue 的
v-for如果把<tr>包在<template>里，要确认编译后<tr>确实落在<tbody>内部 - 服务端渲染（SSR）时若初始 HTML 没带
table-striped类，首屏可能无条纹——确保 class 字符串随组件一起输出
条纹本质是纯 CSS 行为，和框架生命周期无关，关键永远落在最终生成的 DOM 结构上。
