使用引导条带表而不添加类= "table table-striped"

Question

Bootstrap提供带条纹行的表：https://getbootstrap.com/docs/5.0/content/tables/#striped-行。您需要向HTML表元素添加一个类才能使用它们。

<table class="table table-striped">
...
</table>

如果不能更改HTML怎么办？只有css？换句话说：我被很多现有的带有常规表元素(没有类(的HTML文件卡住了：

<table>
...
</table>

我确实希望这些表有条纹行。

我可以使用CSS解决方案将Bootstrap的.table striped中定义的样式应用于常规表吗？

.table-striped {
...
}

还是我必须通过创建自己的CSS文件来覆盖Bootstrap？

Answer 1

在css 中尝试此操作

.table-striped tbody tr:nth-of-type(odd) {
background-color: rgba(0, 0, 0, 0.05); }

但是(总是一个但是：(我不建议那样做。为什么？BS4就是这样做的。如果你安装了一个新的引导程序版本怎么办？此代码与版本4.5匹配，但无法与版本5匹配。所以你每次都要复习。

正确的解决方案是深入研究SCSS。与普通css相比，这种工作模型有很多优点。您可以编写BS4或任何您想要的东西，基于变量进行编译(例如，您设置了一种颜色，并且该颜色在整个项目中被替换(、嵌套格式以及更多优点。一开始它的成本有点高，但一旦掌握了它，就好像用php编程，但用CSS编程一样。我建议查看此链接。

祝好运