使用 Bootstrap 条带表而不添加 class="table table-striped"答案

【问题标题】：Using Bootstrap striped tables without adding class="table table-striped"使用 Bootstrap 条带表而不添加 class="table table-striped"
【发布时间】：2021-03-19 12:24:09
【问题描述】：

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

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

如果您无法更改 HTML 怎么办？只有css？换句话说：我被很多现有的带有常规表格元素（无类）的 HTML 文件所困扰：

<table>
  ...
</table>

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

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

.table-striped {
  ...
}

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

【问题讨论】：

使用 javascript 添加一个类很简单（而且很容易研究如何）
谢谢。我从来没有用过javascript，但是用它添加需要的类确实很简单。

标签： html css bootstrap-4

【解决方案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 编程一样。我建议评论这个link。

祝你好运

【讨论】：