Comment modifier uniquement la deuxième colonne d'un tableau à l'aide de CSS ?

Question

En utilisant uniquement les css, comment puis-je remplacer les css de la deuxième colonne d'un tableau.

Je peux accéder à toutes les colonnes en utilisant :

.countTable table table td

Je ne peux pas accéder au code html de cette page pour le modifier car ce n'est pas mon site.

Merci.

Answer 1

Vous pouvez utiliser le :nth-child une pseudo-classe comme celle-ci :

.countTable table table td:nth-child(2)

Notez cependant que cela ne fonctionnera pas dans les anciens navigateurs (ou IE), vous devrez donner une classe aux cellules ou utiliser le javascript dans ce cas.

Answer 2

Essayez ça :

.countTable table tr td:first-child + td

Vous pouvez également réitérer afin de styliser les autres colonnes :

.countTable table tr td:first-child + td + td {...} /* third column */
.countTable table tr td:first-child + td + td + td {...} /* fourth column */
.countTable table tr td:first-child + td + td + td +td {...} /* fifth column */

Answer 3

Pour modifier uniquement la deuxième colonne d'un tableau, procédez comme suit :

Cas général :

table td + td{  /* this will go to the 2nd column of a table directly */

background:red

}

Votre affaire :

.countTable table table td + td{ 

background: red

}

Remarque : cela fonctionne pour tous les navigateurs (modernes et anciens), c'est pourquoi j'ai ajouté ma réponse à une ancienne question.

Answer 4

/*
  Using a formula (an + b).
  Description: a represents a cycle size,
  n is a counter (starts at 0),
  and b is an offset value.
*/
table tbody td:nth-child(2n+1) {
  background-color: #C9E4AB
}

http://www.w3schools.com/cssref/sel_nth-child.asp

Answer 5

Vous pourriez désigner une classe pour chaque cellule de la deuxième colonne.

<table>
<tr><td>Column 1</td><td class="col2">Col 2</td></tr>
<tr><td>Column 1</td><td class="col2">Col 2</td></tr>
<tr><td>Column 1</td><td class="col2">Col 2</td></tr>
<tr><td>Column 1</td><td class="col2">Col 2</td></tr>
</table>