最稳方案是直接修改CSS变量--bs-table-accent-bg；必须同时添加table和table-striped类，且确保tbody存在，否则条纹不生效。
直接改 css 变量 --bs-table-accent-bg 最稳，别碰 nth-child 或手写低权重覆盖规则。
必须先加 table 类，table-striped 才生效
只写 <table class="table-striped"> 一定没条纹——Bootstrap 的条纹样式依赖选择器 .table-striped > tbody > tr:nth-of-type(odd)，而这个规则只在 .table 存在时才被完整加载。
-
<table class="table table-striped">✅ 正确 -
<table class="table-striped">❌ 无效 - 动态渲染（如 Vue 的
v-for、React 的map）漏掉<tbody>标签，也会导致条纹消失 - 检查 DevTools 中是否命中了
.table-striped > tbody > tr:nth-of-type(odd)这条规则，比猜更准
改颜色优先用 --bs-table-accent-bg 变量
Bootstrap 5.3+ 内置该变量控制条纹背景色，默认值是 var(--bs-table-striped-bg)，它本身又由 --bs-table-accent-bg 驱动。改它，一劳永逸。
- 全局改：在
:root里加--bs-table-accent-bg: #eef2ff; - 局部改：给表格加 wrapper 类，比如
<div class="my-table"><table class="table table-striped">...</table></div>，再写.my-table { --bs-table-accent-bg: #f3e5f5; } - 如果用了
.table-dark，记得同步设--bs-table-dark-accent-bg，否则深色表里条纹会变透明或消失 - 别用
tr:nth-child(odd)替代nth-of-type(odd)——<caption>、注释节点、服务端注入的空<tr>都会让nth-child错位
自定义 CSS 覆盖时注意继承链和 hover 冲突
直接写 .table-striped > tbody > tr:nth-of-type(odd) { background-color: #f0f8ff !important; } 也能行，但容易翻车：
- 单元格（
td/th）默认background-color: inherit，所以光改tr不够，得加!important或同时覆盖td和th - 如果还用了
.table-hover，悬停时会盖掉条纹色；要保留条纹感，得额外写.table-hover tbody tr:hover:nth-of-type(odd) - 移动端启用
.table-sm后，padding缩小可能导致条纹视觉变窄，需同步调单元格内边距 - 别用 SVG 背景图模拟“真条纹”——
table-striped就是纯色背景，进度条才用 SVG 条纹
真正难的不是怎么改颜色，而是改完后没验证 <tbody> 是否真实包裹了所有数据行，以及是否被更高权重的全局 reset 规则（比如某个 UI 库的 tr { background: none !important }）静默覆盖了。
