Discussion :

[livebe]

Bonjour,

Dans un tableau, je voudrais alterner la couleur de fond une ligne sur deux, le code ci-après le fait, à l'exception de l'interstice entre les colonnes, comment le remplir lui-aussi?

Merci.

Code :

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

1
2
3
tr:nth-child(odd) {
    background-color: lightgrey;
}

[Décibel]

Le tableau se fait en PHP ou il est fixe ?

[black-hawk-down]

De quel interstice tu parles ? Du border-spacing ?

Un exemple de tableau serait le bienvenu.

[livebe]

>Du border-spacing ?
Oui, désolé fatigué, le border-spacing entre les colonnes, mais une sur 2.

Table fixe tout ce qu'il y a de plus classique.

Code :

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

1
2
3
tr:nth-child(odd) {
    background-color: lightgrey;
}

Code html :

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

1
2
3
4
5
<table>
<tr><td>cell11</td><td>cell12</td><td></td></tr>
<tr><td>cell21</td><td>cell22</td><td></td></tr>
<tr><td>cell31</td><td>cell32</td><td>cell33</td></tr>
</table>

[CosmoKnacki]

[Edit] oups, je viens de relire ta question, et en fait j'avais compris tout à fait autre chose. Le plus simple est de supprimer l'espace en question de la table:

Code :

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

table { border-collapse: collapse;}

[ancien post]
En fait tu ne peux pas vraiment le faire car il s'agit de la couleur de fond de l'élément table.

Par contre tu peux ruser en agglutinant toutes les cellules et en simulant la couleur de fond de la ligne avec border:

Code :

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

1
2
3
4
5
6
7
8
9
table { border-collapse: collapse;}
 
tr:nth-child(odd) {
    background-color: lightgrey;
}
 
td { border-right: 2px solid white; }
tr:nth-child(even) td {border-color: lightgrey;}
tr td:last-child {border:none;}

[livebe]

@CosmoKnacki
Malin comme un singe , je cherchais midi à 14h en voulant sélectionner les bords une ligne sur deux.

Merci

Evident, et j'ai ajouté pour compenser le border-collapse:

Code :

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

1
2
3
th, td {
	padding-left:0.1cm; padding-right: 0.1cm; padding-top: 0.1cm; padding-bottom: 0.1cm;
}