CSS Bootstrap 表条纹：如何更改条纹背景颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20825211/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap table striped: How do I change the stripe background colour?
提问by drake035
With Bootstrap class table-striped, every other row in my table has a background colour equal to #F9F9F9. How can I change this colour?
使用 Bootstrap 类table-striped，我表中每隔一行的背景颜色等于#F9F9F9. 我怎样才能改变这种颜色？
采纳答案by Florin
.table-striped > tbody > tr:nth-child(2n+1) > td, .table-striped > tbody > tr:nth-child(2n+1) > th {
background-color: red;
}
change this line in bootstrap.css or you could use (odd) or (even) instead of (2n+1)
在 bootstrap.css 中更改这一行，或者您可以使用 (odd) 或 (even) 而不是 (2n+1)
回答by kyriakos
Add the following CSS style after loading Bootstrap:
加载 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
}
回答by Lucas S.
If you are using Bootstrap 3, you can use Florin's method, or use a custom CSS file.
如果您使用的是 Bootstrap 3，您可以使用 Florin 的方法，或者使用自定义 CSS 文件。
If you use Bootstrap less source instead of processed css files, you can directly change it in bootstrap/less/variables.less.
如果你使用 Bootstrap less source 而不是处理过的 css 文件，你可以直接在bootstrap/less/variables.less.
Find something like:
找到类似的东西：
//** Background color used for `.table-striped`.
@table-bg-accent: #f9f9f9;
回答by Eisa Adil
You have two options, either you override the styles with a custom stylesheet, or you edit the main bootstrap css file. I prefer the former.
您有两个选择，要么使用自定义样式表覆盖样式，要么编辑主引导 css 文件。我更喜欢前者。
Your custom styles should be linked after bootstrap.
您的自定义样式应在引导后链接。
<link rel="stylesheet" src="bootstrap.css">
<link rel="stylesheet" src="custom.css">
In custom.css
在 custom.css
.table-striped>tr:nth-child(odd){
background-color:red;
}
回答by sammani anuththara
.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;
}
Use 'even' for change colour of even rows and use 'odd' for change colour of odd rows.
使用“even”更改偶数行的颜色，使用“odd”更改奇数行的颜色。
回答by David Morrow
Delete table-striped Its overriding your attempts to change row color.
删除 table-striped 它会覆盖您更改行颜色的尝试。
Then do this In css
然后在 css 中执行此操作
tr:nth-child(odd) {
background-color: lightskyblue;
}
tr:nth-child(even) {
background-color: lightpink;
}
th {
background-color: lightseagreen;
}
回答by John Lehmann
I found this checkerboard pattern (as a subset of the zebra stripe) to be a pleasant way to display a two-column table. This is written using LESS CSS, and keys all colors off the base color.
我发现这种棋盘格图案（作为斑马条纹的一个子集）是显示两列表格的一种令人愉快的方式。这是使用 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%); }
}
Note I've dropped the .table-striped, but doesn't seem to matter.
请注意，我已经删除了.table-striped，但似乎无关紧要。
Looks like:
好像：
回答by John Lehmann
Don't customize your bootstrap CSS by directly editing bootstrap CSS file.Instead, I suggest to copy paste bootstrap CSS and save them in a different CSS folder and there you can customize or edit stylings suitable to your needs.
不要通过直接编辑引导 CSS 文件来自定义引导 CSS。相反，我建议复制粘贴引导 CSS 并将它们保存在不同的 CSS 文件夹中，您可以在那里自定义或编辑适合您需要的样式。
回答by PhPGuy
If you want to actually reverse the colors, you should add a rule that makes the "odd" rows white as well as making the "even" rows whatever color you want.
如果您想实际反转颜色，您应该添加一个规则，使“奇数”行变为白色，并使“偶数”行成为您想要的任何颜色。
回答by Anna Costalonga
With Bootstrap 4, the responsible css configuration in bootstrap.cssfor .table-stripedis:
使用 Bootstrap 4，bootstrap.cssfor 中负责的 css 配置.table-striped是：
.table-striped tbody tr:nth-of-type(odd) {
background-color: rgba(0, 0, 0, 0.05);
}
For a very simple solution, I just copied it into my custom.cssfile, and changed the values of background-color, so that now I have a fancier light blue shade:
对于一个非常简单的解决方案，我只是将它复制到我的custom.css文件中，并更改了 的值background-color，以便现在我有一个更漂亮的浅蓝色阴影：
.table-striped tbody tr:nth-of-type(odd) {
background-color: rgba(72, 113, 248, 0.068);
}
