Question

我有一个由PHP动态生成的表。我希望我可以使用CSS根据表格行奇/偶的位置应用背景颜色，即背景颜色每隔一行旋转一次。

这有意义吗？谢谢！

Answer 1

您可以在CSS3中使用nth-of-type()或nth-child()选择器。所有现代浏览器都支持。

例如......

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; }

Answer 2

试试这个：

的CSS：

.row0{
 background:white;
}
.row1{
 background:black;
}

在php中打印行（trs）

<?php

$i = 0;
foreach( ... ){

$i = 1-$i;
$class = "row$i";
?>
<tr class="<?php echo $class ?>">
...

Answer 3

理论上它就像tr:nth-child(even) { background: #999; }一样简单但是，支持n-child isn't amazing并且只适用于最新的浏览器

Example：

<!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>

Answer 4

您可以这样做：

$counter = 0;
while(............){
  $counter++;

  $bgcolor = ($counter % 2 === 0) ? 'red' : 'blue';

}

现在，您可以将bgcolor="<?php echo $bgcolor;?>"用于TDs：）

请注意，上述内容适用于所有浏览器，包括IE6。

Answer 5

在CSS中定义以下类

.color0 { #fff; }
.color1 { #ccc; }

在PHP代码中使用以下技术

while($row=mysql_fetch_assoc($q))
{
    echo "<tr class='color$c'>"; 
    echo "<td>data</td>";
    echo "</tr>\n";

    $c=!$c;
}

Answer 6

我想最好的选择是使用foreach的内部迭代器：

示例：

<table>
<?php foreach ($foo as $key => &$bar) : ?>
<tr class="<?php echo ($key + 1) % 2 ? 'odd' : 'even'; ?>">
<td> ... </td>
</tr>
<?php endforeach; ?>
</table>

Answer 7

这是我的方式，你可以试试这个

<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 } ?>

...

Answer 8

如果您的html中有一个小的PHP，您可以使用

<?php echo ($striped)?'even':'odd';$striped=!$striped;?>

使用偶数和奇数之间的交替。

Answer 9

就这样做

   $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 } >

CSS - 表格行/奇数的背景颜色

9 个答案: