.class="table-striped"没生效的主因是未与.table搭配使用，因.table提供基础样式重置，.table-striped仅叠加条纹规则；且需确保包裹<tbody>以避免:nth-child计数错位。
.table-striped 类能直接实现隔行变色，但前提是必须和 .table 一起用，单独加无效。
为什么 class="table-striped" 没生效？
最常见的原因是没配对使用基础类 .table。Bootstrap 的条纹样式依赖于 .table 提供的重置样式（比如清除默认边距、统一单元格对齐等），.table-striped 只是叠加规则，不提供基础结构。
- ✅ 正确写法：
<table class="table table-striped"> - ❌ 错误写法：
<table class="table-striped">（无.table） - ❌ 错误写法：
<table class="table-striped table-bordered">（漏了.table）——.table-bordered不能替代.table
:nth-child(odd) 和 :nth-child(even) 哪个更稳妥？
Bootstrap 默认用 tr:nth-child(odd) 给奇数行上色，但这个选择器实际匹配的是 <tbody> 或 <table> 直接子 <tr>。如果表格含 <thead> 或 <tfoot>，且没包裹在 <tbody> 里，:nth-child 会把表头行也计入计数，导致错位。
- 推荐显式包裹内容行：
<tbody><tr>...</tr></tbody> - 若需自定义颜色，优先改
tbody tr:nth-child(odd)，避免受<thead>干扰 - 不要只写
tr:nth-child(even)—— Bootstrap 4/5 默认是 odd，覆盖时需明确作用域
响应式表格里斑马线消失怎么办？
当表格外层套了 .table-responsive，横向滚动时，某些浏览器（尤其是旧版 Safari 和部分 Android WebView）会破坏 :nth-child 的渲染逻辑，导致隔行色断掉或全白。
立即学习“前端免费学习笔记（深入）”；
- 临时修复：给
.table-responsive加overflow-x: auto（确保它真起作用） - 根本解法：用 JavaScript 动态加类（如
row-0、row-1），绕过伪类限制 - 注意：Bootstrap 5.3+ 已优化该问题，但若用 CDN 引入旧版本（如 5.1），仍可能复现
想按数据条件变色，还能用 .table-striped 吗？
可以共存，但要注意层叠顺序。.table-striped 设的是 background-color，而业务条件色（比如库存不足标红）通常用 JS 动态加类，这类自定义类必须带 !important 或更高优先级选择器，否则会被 .table-striped 覆盖。
- 错误示例：
.low-stock { background: red; }→ 被tr:nth-child(odd)覆盖 - 正确写法：
.low-stock { background: red !important; }或tbody tr.low-stock { background: red; } - 更干净的做法：在
rowStyle回调（Bootstrap Table 插件）里返回完整 class 字符串，避开 CSS 层叠
真正容易被忽略的点是：斑马线效果依赖 DOM 结构完整性。哪怕只是少写一个 <tbody>，或者用了自定义渲染（比如 Vue 渲染 v-for 行但没生成真实 <tr> 标签），:nth-child 就会失效——这时候别急着换 JS 方案，先检查 HTML 输出是否符合预期。
