引导表条纹: 我如何改变条纹背景颜色？

对于 Bootstrap 类 table-striped，表中的其他每一行的背景色都等于 #F9F9F9。我怎样才能改变这种颜色？

260384 次浏览
小开

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

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

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

在 custom.css

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

加载 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
}
小开
最佳答案 
.table-striped > tbody > tr:nth-child(2n+1) > td, .table-striped > tbody > tr:nth-child(2n+1) > th {
background-color: red;
}

在 main bootstrap.css 之后将这一行添加到 style.css 中 或者你可以用(单数)或(偶数)代替(2n + 1)

小开

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

如果您使用 Bootstrap 更少的源代码而不是处理的 css 文件，您可以直接在 bootstrap/less/variables.less中更改它。

找到这样的东西:

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

我发现这种棋盘格模式(作为斑马条纹的一个子集)是显示两列表的一种令人愉快的方式。这是使用较少的 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，但似乎没有关系。

看起来像: enter image description here

小开

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

小开

如果您想要实际反转颜色，您应该添加一条规则，使“奇数”行成为白色，同时使“偶数”行成为您想要的任何颜色。

小开 
.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;
}

偶数行用偶数改变颜色，奇数行用奇数改变颜色。

小开

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

那就这么做 在 CSS 里

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


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


th {
background-color: lightseagreen;
}
小开

使用 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);
}
小开

改变条纹顺序的最简单方法:

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

小开

如果使用 SASS 和 Bootstrap 4，你可以用以下方法更改 .table和 .table-dark的交替背景行颜色:

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

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

您可以在 CSS 中覆盖该标记，如下所示:

table {
--bs-table-striped-color: #85d1ee;
}
小开

我知道这是一个老职位，但改变这个或 td 颜色是不正确的方式。我也被这个帖子骗了。

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

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

引导程序5使用 —— # { $variable-prefix } table-accent- bg

考虑到

.table-striped>tbody>tr:nth-child(odd) > td:hover {
--#{$variable-prefix}table-accent-bg:  #000099;
}
小开

下面的代码解决了我的项目

.table {
--bs-table-striped-bg: #efefef !important;
}

提交答案