Html 使用 CSS 替代表格行颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3084261/
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 table row color using CSS?
提问by Kali Charan Rajput
I am using a table with alternate row color with this.
我正在使用带有交替行颜色的表格。
tr.d0 td {
background-color: #CC9999;
color: black;
}
tr.d1 td {
background-color: #9999CC;
color: black;
}<table>
<tr class="d0">
<td>One</td>
<td>one</td>
</tr>
<tr class="d1">
<td>Two</td>
<td>two</td>
</tr>
</table>Here I am using class for tr, but I want to use only for table. When I use class for table than this apply on tralternative.
在这里，我使用的是 for tr，但我只想使用 for table。当我使用表类时，这适用于tr替代方案。
Can I write my HTML like this using CSS?
我可以使用 CSS 编写这样的 HTML 吗？
<table class="alternate_color">
<tr><td>One</td><td>one</td></tr>
<tr><td>Two</td><td>two</td></tr>
</table>
How can I make the rows have "zebra stripes" using CSS?
如何使用 CSS 使行具有“斑马条纹”？
回答by Russell Dias
$(document).ready(function()
{
$("tr:odd").css({
"background-color":"#000",
"color":"#fff"});
});tbody td{
padding: 30px;
}
tbody tr:nth-child(odd){
background-color: #4C8BF5;
color: #fff;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>13</td>
</tr>
</tbody>
</table>There is a CSS selector, really a pseudo-selector, called nth-child. In pure CSS you can do the following:
有一个 CSS 选择器，实际上是一个伪选择器，称为 nth-child。在纯 CSS 中，您可以执行以下操作：
tr:nth-child(even) {
background-color: #000000;
}
Note:No support in IE 8.
注意：在 IE 8 中不支持。
Or, if you have jQuery:
或者，如果您有 jQuery：
$(document).ready(function()
{
$("tr:even").css("background-color", "#000000");
});
回答by álvaro González
You have the :nth-child()pseudo-class:
你有:nth-child()伪类：
table tr:nth-child(odd) td{
...
}
table tr:nth-child(even) td{
...
}
In the early days of :nth-child()its browser supportwas kind of poor. That's why setting class="odd"became such a common technique. In late 2013 I'm glad to say that IE6 and IE7 are finally dead (or sick enough to stop caring) but IE8 is still around — thankfully, it's the only exception.
在早期，:nth-child()它的浏览器支持有点差。这就是设置class="odd"成为如此普遍的技术的原因。在 2013 年末，我很高兴地说 IE6 和 IE7 终于死了（或者病到不再关心），但 IE8 仍然存在——谢天谢地，这是唯一的例外。
回答by bmich72
Just add the following to your html code (withing the <head>) and you are done.
只需将以下内容添加到您的 html 代码中（使用<head>），您就完成了。
HTML:
HTML：
<style>
tr:nth-of-type(odd) {
background-color:#ccc;
}
</style>
Easier and faster than jQuery examples.
比 jQuery 示例更简单、更快。
回答by Sarfraz
can i write my html like this with use css ?
我可以用 css 写这样的 html 吗？
Yes you can but then you will have to use the :nth-child()pseudo selector (which has limited support though):
是的，您可以，但是您将不得不使用:nth-child()伪选择器（尽管支持有限）：
table.alternate_color tr:nth-child(odd) td{
/* styles here */
}
table.alternate_color tr:nth-child(even) td{
/* styles here */
}
回答by Santosh Khalse
We can use odd and even CSS rules and jQuery method for alternate row colors
我们可以使用奇数和偶数 CSS 规则和 jQuery 方法来交替行颜色
Using CSS
使用 CSS
table tr:nth-child(odd) td{
background:#ccc;
}
table tr:nth-child(even) td{
background:#fff;
}
Using jQuery
使用 jQuery
$(document).ready(function()
{
$("table tr:odd").css("background", "#ccc");
$("table tr:even").css("background", "#fff");
});
table tr:nth-child(odd) td{
background:#ccc;
}
table tr:nth-child(even) td{
background:#fff;
}<table>
<tr>
<td>One</td>
<td>one</td>
</tr>
<tr>
<td>Two</td>
<td>two</td>
</tr>
</table>回答by Sriwantha Attanayake
Most of the above codes won't work with IE version. The solution that works for IE+ other browsers is this.
以上大部分代码不适用于 IE 版本。适用于 IE+ 其他浏览器的解决方案是这样的。
<style type="text/css">
tr:nth-child(2n) {
background-color: #FFEBCD;
}
</style>
回答by Pranay Rana
<script type="text/javascript">
$(function(){
$("table.alternate_color tr:even").addClass("d0");
$("table.alternate_color tr:odd").addClass("d1");
});
</script>
回答by redsquare
You can use nth-child(odd/even) selectors however not all browsers (ie 6-8, ff v3.0) support these rules hence why most solutions fall back to some form of javascript/jquery solution to add the classes to the rows for these non compliant browsers to get the tiger stripe effect.
您可以使用 nth-child(odd/even) 选择器，但并非所有浏览器（即 6-8, ff v3.0）都支持这些规则，因此为什么大多数解决方案回退到某种形式的 javascript/jquery 解决方案以将类添加到这些不合规浏览器的行以获得虎纹效果。
回答by mark
There is a fairly easy way to do this in PHP, if I understand your query, I assume that you code in PHP and you are using CSS and javascript to enhance the output.
在 PHP 中有一种相当简单的方法可以做到这一点，如果我理解你的查询，我假设你用 PHP 编码并且你正在使用 CSS 和 javascript 来增强输出。
The dynamic output from the database will carry a for loop to iterate through results which are then loaded into the table. Just add a function call to the like this:
数据库的动态输出将携带一个 for 循环来迭代结果，然后将这些结果加载到表中。只需添加一个函数调用，如下所示：
echo "<tr style=".getbgc($i).">"; //this calls the function based on the iteration of the for loop.
then add the function to the page or library file:
然后将函数添加到页面或库文件中：
function getbgc($trcount)
{
$blue="\"background-color: #EEFAF6;\"";
$green="\"background-color: #D4F7EB;\"";
$odd=$trcount%2;
if($odd==1){return $blue;}
else{return $green;}
}
}
Now this will alternate dynamically between colors at each newly generated table row.
现在这将在每个新生成的表格行的颜色之间动态交替。
It's a lot easier than messing about with CSS that doesn't work on all browsers.
这比处理不适用于所有浏览器的 CSS 要容易得多。
Hope this helps.
希望这可以帮助。
