加了 table-striped 却没条纹，最常见原因是未引入或错误引入 Bootstrap CSS 文件；必须同时使用 table 和 table-striped 类，且表格需包含显式 tbody；条纹颜色可通过重写 .table-striped > tbody > tr:nth-of-type(odd) 覆盖。
为什么加了 table-striped 却没条纹？
最常见原因是没引入 Bootstrap 的 CSS 文件，或者引入顺序错了——table-striped 依赖 Bootstrap 自带的 CSS 规则，不是纯 HTML 类名。它本身不带任何样式，只靠 Bootstrap 的 .table-striped > tbody > tr:nth-of-type(odd) 规则生效。
检查点：
- 确认
<link>引入了 Bootstrap CSS（如bootstrap.min.css），且在自定义 CSS 之前 - 确保表格有
<tbody>包裹行（Bootstrap 5 要求显式<tbody>，否则:nth-of-type(odd)可能匹配不到） - 避免用
!important覆盖了background-color，或父级设置了background: transparent干扰继承
table-striped 必须和 table 类一起用吗？
是的。Bootstrap 的条纹样式只对同时拥有 table 和 table-striped 的表格生效。单独加 table-striped 没效果。
正确写法：
立即学习“前端免费学习笔记（深入）”；
<table class="table table-striped">
<thead><tr><th>Name</th><th>Age</th></tr></thead>
<tbody>
<tr><td>Alice</td><td>30</td></tr>
<tr><td>Bob</td><td>25</td></tr>
</tbody>
</table>注意：<tbody> 不能省；<thead> 可选但推荐；<tfoot> 若存在，也建议包裹在 <tbody> 外层，否则可能干扰奇偶计数。
条纹颜色能改吗？怎么覆盖默认灰色？
可以，但别直接改 table-striped 类，而是重写它的后代选择器。Bootstrap 默认用 #f8f9fa（浅灰）作为奇数行背景，CSS 优先级比你写的简单类名高。
安全覆盖方式（放在 Bootstrap CSS 之后）：
.table-striped > tbody > tr:nth-of-type(odd) {
background-color: #eef7ff; /* 换成淡蓝 */
}如果用了 Sass，更推荐在自定义变量里改 $table-striped-bg，再重新编译。
注意：不要用 !important，除非你确定要全局强覆盖；也不要只写 tr:nth-child(odd)，因为 nth-of-type 才能准确跳过 <thead> 和 <tfoot> 元素。
响应式表格里 table-striped 还有效吗？
有效，但仅限桌面端正常渲染的表格。当用 table-responsive 包裹时，条纹仍会显示——因为 table-responsive 只是加了个滚动容器，不破坏表格结构。
不过要注意两点：
- 移动端小屏下，如果表格被横向压缩严重，条纹视觉差异可能变弱，建议同步调亮对比度（比如把
background-color改得更深些） - 如果用了
table-sm（紧凑型），条纹高度变小，但规则照常生效，无需额外操作
真正失效的场景是：把表格转成卡片堆叠（比如用 JS 动态重排），那已经不是语义化表格了，table-striped 自然不起作用。
