Bootstrap表条纹：如何更改条纹背景颜色？

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

Answer 1

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

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

你有两个select，你可以用自定义样式表覆盖样式，或者编辑主引导程序的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源而不是处理的css文件，可以直接在bootstrap/less/variables.less更改它。

find如下所示：

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

Answer 5

我发现这个棋盘图案（作为斑马条纹的子集）是一个愉快的方式来显示一个双列表。 这是使用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 6

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

Answer 7

如果你想实际上颠倒颜色，你应该添加一条规则，使“奇数”行变成白色，并使“偶数”行变成任何你想要的颜色。