php CSS - 表行奇数/偶数的背景颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4836134/
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 - background color of table row odd/even
提问by user547794
I have a table that is dynamically generated by PHP. I am hoping that I can use CSS to apply a background color based on where the table row is odd/even, i.e. the background color rotates every other row.
我有一个由 PHP 动态生成的表。我希望我可以使用 CSS 根据表格行是奇数/偶数的位置应用背景颜色，即背景颜色每隔一行旋转。
Does that make sense? Thanks!
那有意义吗？谢谢！
回答by gearsdigital
You can use the nth-of-type()or nth-child()selector in CSS3. Supported by all modern Browsers.
您可以在 CSS3 中使用nth-of-type()或nth-child()选择器。所有现代浏览器都支持。
For example...
例如...
tr:nth-child(odd) { background-color: #ccc; }
/* Do this… */
tr:nth-of-type(odd) { background-color: #ccc; }
/* …or this */
tr:nth-of-type(even) { background-color: #ccc; }
回答by Arshdeep
Try this :
尝试这个 ：
css:
css：
.row0{
background:white;
}
.row1{
background:black;
}
in php while printing rows (trs)
在 php 中打印行 (trs)
<?php
$i = 0;
foreach( ... ){
$i = 1-$i;
$class = "row$i";
?>
<tr class="<?php echo $class ?>">
...
回答by Gareth
In theory it's as easy as tr:nth-child(even) { background: #999; }However, support for nth-child isn't amazingand will only work on the newest browsers
理论上它很简单tr:nth-child(even) { background: #999; }但是，对 nth-child 的支持并不令人惊讶，并且只能在最新的浏览器上运行
示例：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Test</title>
<style type="text/css">
thead, tr:nth-child(even) { background: #aaa; }
</style>
</head>
<body>
<table>
<thead>
<tr><th>Header</th><th>Header</th></tr>
</thead>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
</table>
</body>
</html>
回答by Sarfraz
You can do something like this:
你可以这样做：
$counter = 0;
while(............){
$counter++;
$bgcolor = ($counter % 2 === 0) ? 'red' : 'blue';
}
Now you can use bgcolor="<?php echo $bgcolor;?>"for your TDs:)
现在您可以bgcolor="<?php echo $bgcolor;?>"用于您的TDs:)
Note that above will work in all browsers including IE6.
请注意，以上将适用于包括 IE6 在内的所有浏览器。
回答by alberto
In CSS define the below class
在 CSS 中定义以下类
.color0 { #fff; }
.color1 { #ccc; }
In PHP Code use the below technique
在 PHP 代码中使用以下技术
while($row=mysql_fetch_assoc($q))
{
echo "<tr class='color$c'>";
echo "<td>data</td>";
echo "</tr>\n";
$c=!$c;
}
回答by PA Coipeault
i guess the best option is to use the internal iterator of foreach :
我想最好的选择是使用 foreach 的内部迭代器：
example :
例子 ：
<table>
<?php foreach ($foo as $key => &$bar) : ?>
<tr class="<?php echo ($key + 1) % 2 ? 'odd' : 'even'; ?>">
<td> ... </td>
</tr>
<?php endforeach; ?>
</table>
回答by Dirk
For have a small php inside your html you can use
如果在你的 html 中有一个小的 php，你可以使用
<?php echo ($striped)?'even':'odd';$striped=!$striped;?>
use alternate between even and odd.
在偶数和奇数之间交替使用。
回答by diEcho
this is My way, you can try this
这是我的方式，你可以试试这个
<style type="text/css">
.even{
background-color:#333;
}
.odd{
background-color:#666;
}
</style>
<?php
$i=0;
foreach( ... ){
++$i;
?>
<tr class="<?php echo ($i%2) ? 'even' : 'odd' ?>">
<td>..</td>
</tr>
<?php } ?>
...
...
回答by Mohammad Efazati
just do like this
就这样做
$codd[0] = 'even';
$codd[1] = 'odd';
$codd_i = 1;
foreach($items as $item){
$codd_i = ($codd_i+1)%2;
?>
<tr class="<?php echo $codd[$codd_i] ?>">
</tr>
<?php } >
