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

使用Bootstrap类时table-striped，表中的其他每一行的背景色均等于#F9F9F9。我如何改变这种颜色？

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

加载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
 }

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

如果您使用更少的Bootstrap源而不是已处理的CSS文件，则可以直接在中进行更改bootstrap/less/variables.less。

查找类似：

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

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

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

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

在 custom.css

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

不要通过直接编辑引导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;
}

使用“偶数”更改偶数行的颜色，使用“奇数”更改奇数行的颜色。

Delete table-striped它覆盖了您更改行颜色的尝试。

然后在CSS中执行此操作

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

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

    th {
       background-color: lightseagreen;
    }

我发现这种棋盘图案（作为斑马条纹的一部分）是显示两列表格的一种令人愉快的方式。这是使用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，但似乎无关紧要。

好像：

对于Bootstrap 4，bootstrap.cssfor中负责的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);
}

如果要实际反转颜色，则应添加一条规则，使“奇数”行变为白色，并使“偶数”行变为所需的任何颜色。

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

在表格tr标记前添加空值 tr。