加了 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 要求显式 <code><tbody>，否则 <code>:nth-of-type(odd)可能匹配不到） - 避免用
!important覆盖了background-color，或父级设置了background: transparent干扰继承
table-striped 必须和 table 类一起用吗？
是的。Bootstrap 的条纹样式只对同时拥有 table 和 table-striped 的表格生效。单独加 table-striped 没效果。
正确写法：
| Name | Age |
|---|---|
| Alice | 30 |
| Bob | 25 |
注意：<tbody> 不能省；<code><thead> 可选但推荐；<code><tfoot> 若存在，也建议包裹在 <code><tbody> 外层，否则可能干扰奇偶计数。<h3>条纹颜色能改吗？怎么覆盖默认灰色？</h3>
<p>可以，但别直接改 <code>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> 和 <code><tfoot> 元素。<h3>响应式表格里 <code>table-striped 还有效吗？
有效，但仅限桌面端正常渲染的表格。当用 table-responsive 包裹时，条纹仍会显示——因为 table-responsive 只是加了个滚动容器，不破坏表格结构。
不过要注意两点：
- 移动端小屏下，如果表格被横向压缩严重，条纹视觉差异可能变弱，建议同步调亮对比度（比如把
background-color改得更深些） - 如果用了
table-sm（紧凑型），条纹高度变小，但规则照常生效，无需额外操作
真正失效的场景是：把表格转成卡片堆叠（比如用 JS 动态重排），那已经不是语义化表格了，table-striped 自然不起作用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
