直接修改 --bs-table-striped-color 变量最省事，bootstrap 5.3+ 已支持该 css 自定义属性控制条纹文字颜色；背景色需单独覆盖 tbody > tr:nth-of-type(odd) 的 background-color 并注意继承与权重。
直接改 --bs-table-striped-color 变量最省事
Bootstrap 5.3+ 已内置 CSS 自定义属性支持，table-striped 的条纹色默认由 --bs-table-striped-color 控制，不是写死的十六进制值。只要在根级或表格父容器上覆盖这个变量，所有 .table-striped 表格都会响应式更新。
实操建议：
- 全局改：在
:root或body里加--bs-table-striped-color: #e0f7fa; - 局部改：给某个表格加 wrapper 类（如
.my-table-wrapper），再写.my-table-wrapper { --bs-table-striped-color: #f3e5f5; } - 注意：这个变量只影响文字颜色，背景色仍由
background-color控制 —— 条纹背景实际来自tbody > tr:nth-of-type(odd)的 background-color，默认是var(--bs-table-striped-bg)
.table-striped 的背景色其实是两层叠加
很多人以为改 tr:nth-of-type(odd) 就完事，但 Bootstrap 5 默认用了半透明叠加逻辑：tbody > tr:nth-of-type(odd) > * 会继承 --bs-table-striped-bg 作为背景，而单元格（td/th）本身又带了 background-color: inherit。结果就是：你改了 tr 的 background-color，但被子元素的 inherit 覆盖了。
正确做法是直接干掉继承链：
- 覆盖
tbody > tr:nth-of-type(odd)的background-color，并加!important（因为 Bootstrap 的规则权重高） - 或者更稳妥：同时覆盖
tbody > tr:nth-of-type(odd) > td, tbody > tr:nth-of-type(odd) > th - 别漏掉悬停态：
.table-striped > tbody > tr:hover的背景可能盖掉条纹，需一并调整
用 SVG 替换条纹？没必要，除非你要斜线/点阵
table-striped 是纯色背景，不是图案。网上有些教程教你用 base64 SVG 当背景图来实现“真条纹”，那是混淆了 .progress-bar-striped 的机制 —— 进度条才用 SVG 条纹，表格不用。
如果你硬要斜线纹、网格纹，那得放弃 table-striped，自己写：
- 删掉
table-striped类 - 用
repeating-linear-gradient或url("data:image/svg+xml,...")设为tbody > tr:nth-of-type(odd)的 background-image - 注意：SVG 要 URL 编码，fill 颜色要手动替换（如
%23ff6b6b），且必须设background-size控制密度
动态行色和 table-striped 一起用会打架
如果你还用了 bootstrap-table 的 rowStyle 回调，或者手写了 :nth-child(odd)，它们和 table-striped 的 :nth-of-type(odd) 规则会冲突 —— 前者按 DOM 顺序算，后者按 tr 元素类型算，遇到 colgroup、caption 或服务端渲染的空行时，奇偶错位很常见。
建议：
- 要么彻底弃用
table-striped，全用rowStyle控制 - 要么把
rowStyle仅用于业务态着色（如 status=error），条纹交给 CSS 管理 - 检查浏览器 DevTools 的 Computed Styles，确认最终生效的是哪条 background-color 规则 —— 很多时候是
!important没加对位置，或者变量作用域错了
条纹颜色看着简单，但变量、继承、选择器权重、动态 JS 渲染四层叠在一起，最容易卡在“明明改了却没变”上。动手前先看一眼 computed 样式里的 background-color 来源，比猜十次都管用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
