CSS 表格交替行颜色和悬停颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36136019/
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
CSS table alternate row colors and hover colors
提问by Chris Cox
I have a table with class table. The only styling so far is the table th. I'd like to use a CSS value to alternate between white and silver for the rows, and hover silver for the entire row. Does anyone have the code for that?
我有一张带班级表的表。到目前为止唯一的样式是 table th。我想使用 CSS 值在行的白色和银色之间交替，并为整行悬停银色。有没有人有代码？
<table class='table'>
<tr>
<th>heading</th>
<th>heading 2</th>
<th>heading 3</th>
</tr>
<tr class='table'>
<td>col 1</td>
<td>col 2</td>
<td>col 3</td>
</tr>
<tr class='table'>
<td>col 1</td>
<td>col 2</td>
<td>col 3</td>
</tr>
<tr class='table'>
<td>col 1</td>
<td>col 2</td>
<td>col 3</td>
</tr>
</table>
That is the html example (as it's written in php)
那是 html 示例（因为它是用 php 编写的）
CSS
CSS
.table {
background-color: #FFFFFF;
color: #000000;
}
.table th {
background-color: #333333;
color: #FFFFFF;
}
That's it so far. Looking for the values to use for I'm guessing the table tr css.
到此为止。寻找用于我猜测表 tr css 的值。
Saying different because even/odd doesn't work & it's dynamic php not strict html.
说不同是因为偶数/奇数不起作用&它是动态的php而不是严格的html。
回答by Angelique
If you've already set the background color of your table to white, you just need to set the alternate row and hover backgrounds, like so:
如果您已经将表格的背景颜色设置为白色，则只需设置备用行和悬停背景，如下所示：
.table tr {
transition: background 0.2s ease-in;
}
.table tr:nth-child(odd) {
background: silver;
}
.table tr:hover {
background: silver;
cursor: pointer;
}
Additionally, you probably don't need to repeat the tableclass on each row, FWIW. You can just target those rows using .table tras I have done. If you're trying to make sure the table header and body styles don't interfere with each other, it's more semantic and just cleaner to wrap those elements in a theadand tbody:
此外，您可能不需要table在每一行上重复该类，FWIW。您可以.table tr像我一样使用这些行作为目标。如果您试图确保表格标题和正文样式不会相互干扰，那么将这些元素包装在 a theadand 中更符合语义且更简洁tbody：
<table class='table'>
<thead>
<tr>
<th>heading</th>
<th>heading 2</th>
<th>heading 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>col 1</td>
<td>col 2</td>
<td>col 3</td>
</tr>
<tr>
<td>col 1</td>
<td>col 2</td>
<td>col 3</td>
</tr>
<tr>
<td>col 1</td>
<td>col 2</td>
<td>col 3</td>
</tr>
</tbody>
</table>回答by Matthias Seifert
You can achieve this with a little bit css, just use the n-th child selector, like this:
你可以用一点 css 来实现这一点，只需使用第 n 个子选择器，如下所示：
HTML:
HTML：
<table class="alternate">
<tr>
<td>Row Col 1 </td>
<td>Row Col 2 </td>
</tr>
<tr>
<td>Row Col 1 </td>
<td>Row Col 2 </td>
</tr>
<tr>
<td>Row Col 1 </td>
<td>Row Col 2 </td>
</tr>
<tr>
<td>Row Col 1 </td>
<td>Row Col 2 </td>
</tr>
</table>
CSS:
CSS：
.alternate tr:nth-child(2n) {
background-color: silver;
}
.alternate tr {
background-color: white;
}
.alternate tr:nth-child(2n):hover, .alternate tr:hover {
background-color: grey;
}
And here is a working fiddle, I hope that is what you were looking for.
这是一个工作小提琴，我希望这就是你要找的。
