带有内联样式 CSS 的表格上的交替行颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16171426/
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
Alternate Row Colours on Tables with Inline Style CSS
提问by williamwmy
I want to alternate the background colour of a table to increase readability. After googling a bit I found the code I needed.
我想改变表格的背景颜色以提高可读性。谷歌搜索后，我找到了我需要的代码。
tr:nth-child(even) {
background-color: #000000;
}
The problem in my solution, I don't have access to head tag, and I want to implement this with inline style CSS, but it doesnt work.
我的解决方案中的问题，我无权访问 head 标记，我想用内联样式 CSS 实现它，但它不起作用。
<tr style="nth-child(even) background-color: #000000;">
Ideas?
想法？
回答by BoltClock
Inline styles are per-element, so you would have to inject the appropriate styles into the styleattribute of every other trelement. If you're not already generating these rows dynamically, and you cannot use JavaScript to inject these styles, then you're stuck with having to manually apply the attribute on each trelement.
内联样式是针对每个元素的，因此您必须将适当的样式注入到style每个其他tr元素的属性中。如果您还没有动态生成这些行，并且您不能使用 JavaScript 来注入这些样式，那么您将不得不在每个tr元素上手动应用该属性。
回答by Rand Hearts JS
I had a similar situation. I solved it by putting a style section just before my table:
我也有类似的情况。我通过在我的桌子前放置一个样式部分来解决它：
<style>
table#some_table_id tr:nth-child(even) { background-color:#dddddd; }
</style>
<table id="some_table_id">
<!-- table markup removed -->
</table>
Not the most elegant solution, but it works for me (in Google Chrome 29.0.x).
不是最优雅的解决方案，但它对我有用（在 Google Chrome 29.0.x 中）。
回答by Arkana
In addition to BoltClock answer, if you can use jQuery you can try something like this:
除了 BoltClock 答案，如果你可以使用 jQuery，你可以尝试这样的事情：
$('tr:nth-child(even)').css("background", "red");
This auto-insert inline styles in your markup.
这会在您的标记中自动插入内联样式。
回答by L__
So, I am actually using React... I wanted to get a table to display the rows in alternating colors. The code uses a lot of inline styling and there are some interesting syntax differences for css, but I thought I would share the piece of code that does it.
所以，我实际上是在使用 React...我想要一个表格来以交替的颜色显示行。代码使用了很多内联样式，并且 css 有一些有趣的语法差异，但我想我会分享一段代码。
I am mapping through an array of lines of a report:
我正在映射报告的一系列行：
<tbody>
<tr key={line.number} style={(line.number % 2) ? { backgroundColor: 'someColor' } : null}>
...code table column data here...
</tr>
</tbody>
<tbody>
<tr key={line.number} style={(line.number % 2) ? { backgroundColor: 'someColor' } : null}>
...code table column data here...
</tr>
</tbody>
I did find out that I cannot use this code; not because it doesn't work. Since there are lines that get skipped I still end up with rows of the same color next to each other. If I happen to figure that out I will update. For now, I guess I will just use borders.
我确实发现我不能使用此代码；不是因为它不起作用。由于有被跳过的行，我仍然以彼此相邻的相同颜色行结束。如果我碰巧弄清楚了，我会更新。现在，我想我只会使用边框。
-L-
-L-
回答by exploi8
Here's what you're looking for, hope it helps.
这就是你要找的，希望对你有帮助。
tr:nth-child(even) {
background-color: black;
color: white;
}
tr:nth-child(odd) {
background-color: #0000335f;
} <table class="table">
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>text1</td>
<td>text2</td>
<td>text3</td>
<td>text4</td>
<td>text5</td>
</tr>
</tbody>
</table>