CSS - couleur de fond de la rangée de table, pair/impair

J'ai une table qui est généré dynamiquement par PHP. J'espère que je peux utiliser les CSS pour appliquer une couleur de fond en fonction de l'endroit où la ligne de la table est bizarre/même, c'est à dire la couleur d'arrière-plan de la rotation tous les autres lignes.

Cela fait-il sens?
Merci!

OriginalL'auteur user547794 | 2011-01-29

css php

Vous pouvez utiliser le nth-of-type() ou nth-child() sélecteur CSS3. Pris en charge par tous les Navigateurs modernes.

Par exemple...

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

OriginalL'auteur gearsdigital

Essayez ceci :

css:

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

en php lors de l'impression des lignes (trs)

<?php

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

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

votre $i n'est pas incrémenté jamais
1-$i; permet de basculer $i entre 0 et 1

OriginalL'auteur Arshdeep

En théorie, il est aussi facile que de tr:nth-child(even) { background: #999; } Toutefois, le soutien pour nth-child n'est-ce pas incroyable et ne fonctionne que sur les navigateurs les plus récents

Exemple:

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

Yuy vrai, mais IE et nth-child 🙁

OriginalL'auteur Gareth

3

Vous pouvez faire quelque chose comme ceci:
```
$counter = 0;
while(............){
  $counter++;

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

}
```
Maintenant, vous pouvez utiliser bgcolor="<?php echo $bgcolor;?>" pour votre TDs 🙂

Remarque que ci-dessus fonctionne dans tous les navigateurs, y compris IE6.

+1 pour le %2, mais il est préférable de séparer le CSS et le HTML. Plutôt que de la transmission de la couleur elle-même, vous devriez sortie d'un nom de classe.
D'accord, OP pouvez aller pour les classes au lieu de cela, vient de publier rapidement 🙂
pour changer la couleur de fond, nous devons appliquer le style css à tr pas td bcoz si il y a cellspacing & cellpadding est alors donné son est de mauvaise qualité

OriginalL'auteur Sarfraz

En CSS, définir le ci-dessous classe

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

Dans le Code PHP d'utiliser la technique ci-dessous

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

    $c=!$c;
}

OriginalL'auteur alberto

je suppose que la meilleure option est d'utiliser l'itérateur interne de foreach :

exemple :

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

OriginalL'auteur PA Coipeault

c'est Ma façon, vous pouvez essayer ce

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

...

OriginalL'auteur diEcho

1

Pour avoir un petit php à l'intérieur de votre html, vous pouvez utiliser
```
<?php echo ($striped)?'even':'odd';$striped=!$striped;?>
```
utilisation alternative entre pairs et impairs.

OriginalL'auteur Dirk

il suffit de faire comme ceci

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

OriginalL'auteur Mohammad Efazati

Vous devez vous connecter pour publier un commentaire.