Puis-je colorier des colonnes de tableau à l’aide de CSS sans colorier les cellules individuelles?

Y a-t-il un moyen de colorer les plages de colonnes tout en bas. Voir, exemple de démarrage ci-dessous:

Motor Engine Car Body
1 2 3 4 5 6 7
7 1 2 3 4 5 6

Et je cherche un meilleur moyen (moins de code, coloriage non individuel) pour colorer, par exemple, les scopes “Moteur” et “Corps”, y compris toutes les cellules situées en dessous dans #DDD

  .color { background-color: #DDD }  
Motor Engine Car Body
1 2 3 4 5 6 7
7 1 2 3 4 5 6

Oui, vous pouvez … utiliser l’élément

:

 .grey { background-color: rgba(128,128,128,.25); } .red { background-color: rgba(255,0,0,.25); } .blue { background-color: rgba(0,0,255,.25); } 
 
# color 1 color 2
1 red red red blue
2 red red red blue

Vous pouvez utiliser le sélecteur nth-child pour cela:

 tr td:nth-child(2), tr td:nth-child(3) { background: #ccc; } 
 
headline 1 headline 2
column 1 column 2 column 3
column 1 column 2 column 3
column 1 column 2 column 3

Il est généralement plus simple de styler les cellules (par colonne si vous le souhaitez), mais les colonnes peuvent être stylées de différentes manières. Une méthode simple consiste à envelopper des colonnes dans un élément colgroup et à y définir des styles. Exemple:

  
Motor Engine Car Body
1 2 3 4 5 6 7
7 1 2 3 4 5 6

Vous pouvez utiliser CSS3: http://jsfiddle.net/snuggles08/bm98g8v8/

  Styled table: 
1 2 3 4 5 6 7
7 1 2 3 4 5 6

Unstyled table:
1 2 3 4 5 6 7
7 1 2 3 4 5 6

L’instrument suivant est le sélecteur nth-child et devrait fonctionner …

  

Ma version utilisant des expressions nth-child:

Utiliser le concept CSS de règles en cascade pour colorer d’abord les cellules puis décolorer celles que je veux rendre transparentes. Le premier sélecteur sélectionne toutes les cellules après la première et la seconde sélectionne la cinquième cellule pour la rendre transparente.

  
Motor Engine Car Body
1 2 3 4 5 6 7
7 1 2 3 4 5 6

J’utiliserais la pseudo-classe CSS nth-child pour cela:

 tr td:nth-child(2), tr th:nth-child(2), tr td:nth-child(3), tr td:nth-child(4), tr th:nth-child(4), tr td:nth-child(6), tr td:nth-child(7){ background-color: #DDD; } 
 tr td:nth-child(2), tr th:nth-child(2), tr td:nth-child(3), tr td:nth-child(4), tr th:nth-child(4), tr td:nth-child(6), tr td:nth-child(7) { background-color: #DDD; } 
 
Motor Engine Car Body
1 2 3 4 5 6 7
7 1 2 3 4 5 6

C’est une vieille question avec beaucoup de bonnes réponses. Je voulais juste append les sélecteurs -n et nth-last-child qui n’ont pas encore été mentionnés. Ils sont utiles lors de l’application de CSS à plusieurs colonnes, mais ils peuvent ne pas connaître le nombre de colonnes avant le style ou disposer de plusieurs tables de différentes largeurs.

 /* Select the first two */ table tr td:nth-child(-n + 2) { background-color: lightblue; } /* Select all but the first two */ table tr td:not(:nth-child(-n + 2)) { background-color:lightgreen; } /* Select last two only */ table tr td:nth-last-child(-n + 2) { background-color:mistyrose; } /* Select all but the last two */ table tr td:not(:nth-last-child(-n + 2)) { background-color:yellow; } 

jsFiddle: https://jsfiddle.net/3rpf5oht/2/