Couleur différente suivant ligne

**ParisElliot** · 21/04/2017, 10h57

Bonjour à tous,

Je rempli un tableau grâce à ma base de données et je rencontre un problème pour le rendre plus "beau" avec le css. En effet, je souhaite mettre 3 couleurs différentes : 1 à la première ligne, 1 autre à la seconde ligne, mais aussi une 3ème couleur à un spoiler qui s'affiche entre chaque ligne de ce tableau.

Voici mon code actuel :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<table>
<tr class="infotournee">
        <td><p class="villetournee"><b><?php echo ''.$donnees['ville'].'';?></b></p> <p class="nomtournee"><?php echo ''.$donnees['nomtournee'].'';?></p></td>
        <td> Du <?php echo ''.utf8_encode($datedebut).'';?><br>au <?php echo ''.utf8_encode($datefin).'';?></td>
        <td><?php echo ''.$donnees['adresse'].'';?></td>
        <td><a href="#spoiler<?php echo $donnees['id_event']; ?>" class="spoiler-link lienresa">PLUS D'INFOS</a><a class="lienresa" href="#">RESERVER</a></td>
</tr>
<tr class="spoilertournee">
      <td colspan="4">
           <div class="spoilers">
                 <div class="spoiler" id="spoiler<?php echo $donnees['id_event']; ?>">
                        <p><?php echo ''.utf8_encode($datedebut).'';?></p>
                 </div>
           </div>
     </td>
</tr>
</table>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
table tr:not(.infotournee)
{
  background-color:rgba(193,5,110,0.35);
}
 
table tr.infotournee:nth-child(odd) /* Impaire */
{
  background-color: rgba(193,5,110,0.75);
}
 
table tr.infotournee:nth-child(even)
{
  background-color: rgba(193,5,110,0.5);
}

Pour l'instant voici le résultat (qui est logique) mais je ne trouve pas la solution :

Nom : Sans titre.png
Affichages : 443
Taille : 46,2 Ko

Merci à tous d'avance !

Invité · 21/04/2017, 11h06

Bonjour,

dans le forum CSS, il faut fournir le code HTML généré (pas de PHP) pout pouvoir tester.

**ParisElliot** · 21/04/2017, 11h08

Voici donc mon code HTML :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
 
<table class="tabletournee">
    <caption>Dates et lieux de la tournée 2017</caption>   
        <tr class="infotournee">
            <td><p class="villetournee"><b>Saumur</b></p> <p class="nomtournee">Cirque </p></td>
            <td> Du 07 juillet<br>au 07 juillet 2017</td>
            <td>Terrain de Breil</td>
            <td><a href="#spoiler45" class="spoiler-link lienresa">PLUS D'INFOS</a><a class="lienresa" href="#">RESERVER</a></td>
        </tr>
        <tr class="spoilertournee">
            <td colspan="4">
                <div class="spoilers">
                    <div class="spoiler" id="spoiler45">
                        <p>07 juillet</p>
                    </div>
                </div>
            </td>
        </tr>
 
        <tr class="infotournee">
            <td><p class="villetournee"><b>Blois</b></p> <p class="nomtournee">Cirque </p></td>
            <td> Du 08 juillet<br>au 08 juillet 2017</td>
            <td>Parc des expositions</td>
            <td><a href="#spoiler46" class="spoiler-link lienresa">PLUS D'INFOS</a><a class="lienresa" href="#">RESERVER</a></td>
        </tr>
        <tr class="spoilertournee">
            <td colspan="4">
                <div class="spoilers">
                    <div class="spoiler" id="spoiler46">
                        <p>08 juillet</p>
                    </div>
                </div>
            </td>
        </tr>
 
        <tr class="infotournee">
            <td><p class="villetournee"><b>Châteaudun</b></p> <p class="nomtournee">Cirque </p></td>
            <td> Du 09 juillet<br>au 09 juillet 2017</td>
            <td>Le Halle rue de Sancheville</td>
            <td><a href="#spoiler47" class="spoiler-link lienresa">PLUS D'INFOS</a><a class="lienresa" href="#">RESERVER</a></td>
        </tr>
        <tr class="spoilertournee">
            <td colspan="4">
                <div class="spoilers">
                    <div class="spoiler" id="spoiler47">
                        <p>09 juillet</p>
                    </div>
                </div>
            </td>
        </tr>
 
        <tr class="infotournee">
            <td><p class="villetournee"><b>Valenciennes</b></p> <p class="nomtournee">Cirque </p></td>
            <td> Du 10 juillet<br>au 12 juillet 2017</td>
            <td>Parking Lacuzon</td>
            <td><a href="#spoiler48" class="spoiler-link lienresa">PLUS D'INFOS</a><a class="lienresa" href="#">RESERVER</a></td>
        </tr>
        <tr class="spoilertournee">
            <td colspan="4">
                <div class="spoilers">
                    <div class="spoiler" id="spoiler48">
                        <p>10 juillet</p>
                    </div>
                </div>
            </td>
        </tr>
 
        <tr class="infotournee">
            <td><p class="villetournee"><b>Dunkerque</b></p> <p class="nomtournee">Cirque </p></td>
            <td> Du 13 juillet<br>au 14 juillet 2017</td>
            <td>Carrefour Saint Pol sur mer</td>
            <td><a href="#spoiler49" class="spoiler-link lienresa">PLUS D'INFOS</a><a class="lienresa" href="#">RESERVER</a></td>
        </tr>
        <tr class="spoilertournee">
            <td colspan="4">
                <div class="spoilers">
                    <div class="spoiler" id="spoiler49">
                        <p>13 juillet</p>
                    </div>
                </div>
            </td>
        </tr>
</table>

Invité · 21/04/2017, 11h44

Bon. Je crois comprendre...

A priori (sauf erreur), :nth-child se moque des classes !
Le décompte (odd/even,...) se fait sur les balises <tr>, sans considération de class.

Une solution : ajouter des class en PHP

en utilisant le modulo de 2 pour l'alternance :
en réinitialisant le compteur à chaque "spoiler"

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

<tr class="infotournee infotournee<?php echo ($compteur%2); $compteur++; ?>">

($compteur%2) vaut 0 ou 1.

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
table tr.infotournee1 /* Impaire */
{
  background-color: rgba(193,5,110,0.75);
}
 
table tr.infotournee0
{
  background-color: rgba(193,5,110,0.5);
}

[Hors sujet] Petite astuce pour l'affichage des dates :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

        <td><?php echo ($datedebut == $datefin)? 'Le '.utf8_encode($datedebut) : 'Du '.utf8_encode($datedebut).'<br/>au '.utf8_encode($datefin); ?></td>

ou plutôt, puisque $datefin semble contenir en + l'année :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

        <td><?php echo (strpos($datedebut,' '.$datefin))? 'Le '.utf8_encode($datedebut) : 'Du '.utf8_encode($datedebut).'<br/>au '.utf8_encode($datefin); ?></td>

**ParisElliot** · 21/04/2017, 12h21

Merci de ta réponse et de tes explications !

Cependant, une erreur s'affiche lors du test : Il me dit que la variable $compteur n'est pas déclarée. Comment faire ? Puisque si je la déclare à 0 ou à 1 (j'ai fais le test) la variable reste la même et donc les couleurs aussi.

Alors que quand je regarde le code généré avec l'erreur, les variable sont bien incrémentées (infotournee0 et infotournee1).

Code de l'erreur :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

Notice: Undefined variable: compteur in C:\wamp\www\Medrano2017\index.php on line 72

Invité · 21/04/2017, 12h26

Ouvre une discussion dans le forum PHP.

Avec ton code PHP, donc.

**ParisElliot** · 21/04/2017, 12h29

Ça marcher merci.

Couleur différente suivant ligne

Tableau en CSS

Discussions similaires

Partager

Partager