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

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中更改此行,或者您可以使用(odd)或(even)而不是(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

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

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

Answer 5

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

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

找到类似的东西:

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

Answer 6

删除 table-striped 它会覆盖您更改行颜色的尝试。

然后在 css 中执行此操作

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

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

    th {
       background-color: lightseagreen;
    }

Answer 7

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

您可以在 CSS 中覆盖该标签，如下所示：

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

Answer 8

.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 9

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

.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);
}