条带引导表：如何更改条纹背景颜色？

Question

使用Bootstrap类table-striped，表格中的每一行都有一个等于#F9F9F9的背景色。如何更改此颜色？

Answer 1

加载Bootstrap后添加以下CSS样式：

.table-striped>tbody>tr:nth-child(odd)>td, 
.table-striped>tbody>tr:nth-child(odd)>th {
   background-color: red; // Choose your own color here
 }

Answer 2

.table-striped > tbody > tr:nth-child(2n+1) > td, .table-striped > tbody > tr:nth-child(2n+1) > th {
   background-color: red;
}

在bootstrap.css中更改此行 或者您可以使用（单数）或（偶数）代替（2n + 1）

Answer 3

您有两个选项，要么使用自定义样式表覆盖样式，要么编辑主引导程序css文件。我更喜欢前者。

您的自定义样式应在引导后链接。

<link rel="stylesheet" src="bootstrap.css">
<link rel="stylesheet" src="custom.css">

在custom.css

.table-striped>tr:nth-child(odd){
   background-color:red;
}

Answer 4

如果您使用的是Bootstrap 3，则可以使用Florin的方法，或使用自定义CSS文件。

如果使用Bootstrap less source而不是已处理的css文件，则可以在bootstrap/less/variables.less中直接更改它。

找到类似的内容：

//** Background color used for `.table-striped`.
@table-bg-accent:               #f9f9f9;

Answer 5

对于Bootstrap 4，bootstrap.css中.table-striped的负责的CSS配置为：

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

对于一个非常简单的解决方案，我只是将其复制到我的custom.css文件中，并更改了background-color的值，所以现在我有了一个更漂亮的浅蓝色：

.table-striped tbody tr:nth-of-type(odd) {
  background-color:  rgba(72, 113, 248, 0.068);
}

Answer 6

我发现这种棋盘图案（作为斑马条纹的一个子集）是一种显示双列表的愉快方式。这是使用LESS CSS编写的，并键入基色的所有颜色。

@base-color: #0000ff;
@row-color: lighten(@base-color, 40%);    
@other-row: darken(@row-color, 10%);

tbody {
    td:nth-child(odd) { width: 45%; }
    tr:nth-child(odd) > td:nth-child(odd) {
        background: darken(@row-color, 0%); }
    tr:nth-child(odd) > td:nth-child(even) {
        background: darken(@row-color, 7%); }
    tr:nth-child(even) > td:nth-child(odd) {
        background: darken(@other-row, 0%); }
    tr:nth-child(even) > td:nth-child(even) {
        background: darken(@other-row, 7%); }
}

注意我放弃了.table-striped，但似乎并不重要。

看起来像：

Answer 7

不要通过直接编辑bootstrap CSS文件来自定义你的bootstrap CSS。相反，我建议复制粘贴bootstrap CSS并将它们保存在不同的CSS文件夹中，你可以自定义或编辑适合你需要的样式。

Answer 8

更改条带化顺序的最简单方法：

在表tr标记之前添加空 tr。

Answer 9

如果你想要实际反转颜色，你应该添加一个规则，使＆＃34;奇数＆＃34;行白色以及制作＆＃34;偶数＆＃34;行你想要的任何颜色。

Answer 10

.table-striped>tbody>tr:nth-child(odd)>td,
.table-striped>tbody>tr:nth-child(odd)>th {
  background-color: #e08283;
  color: white;
}
.table-striped>tbody>tr:nth-child(even)>td,
.table-striped>tbody>tr:nth-child(even)>th {
  background-color: #ECEFF1;
  color: white;
}

使用'even'更改偶数行的颜色，并使用'odd'更改奇数行的颜色。

Answer 11

删除表条纹 它覆盖了您更改行颜色的尝试。

然后执行此操作 在CSS中

   tr:nth-child(odd) {
    background-color: lightskyblue;
    }

   tr:nth-child(even) {
    background-color: lightpink;
    }

    th {
       background-color: lightseagreen;
    }

Answer 12

如果使用SASS和Bootstrap 4，则可以使用以下命令更改.table和.table-dark的交替背景行颜色：

$table-accent-bg: #990000;
$table-dark-accent-bg: #990000;

Answer 13

我在为自己寻找解决方案时看到了这篇文章。通过使用 chrome 的检查器，我能够确定条纹颜色是从 --bs-table-striped-color 标签应用的。

在您的 css 中覆盖该标签：

<style scoped>
table {
--bs-table-striped-color: #85d1ee;
}
</style>

Answer 14

我知道这是一篇旧帖子，但更改 th 或 td 颜色不是正确的方法。我也被这个帖子骗了。

首先加载您的 bootstrap.css 并将其添加到您自己的 css 中。 这样，如果您有悬停的表格，则只有 2 行，否则只有 1 行，除非您想更改奇数和偶数 :-)

.table-striped>tbody>tr:nth-child(odd) {
    background-color: LemonChiffon;
}
.table-hover tbody tr:hover {
    background-color: AliceBlue;
}