Utilisation de CSS comment modifier uniquement la 2ème colonne d'un tableau

126

En utilisant uniquement css, comment puis-je remplacer le css de la deuxième colonne d'une table.

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

.countTable table table td

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

Merci.

css 

Réponses:

239

Vous pouvez utiliser la :nth-childpseudo classe comme ceci:

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

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

— Nick Craver
source
Cela ne donnera que la deuxième cellule de chaque tableau, pas la deuxième cellule de chaque ligne. Vous avez besoin de .countTable table table tr td: nth-child (2)
— Deeksy
3
@Deeksy - Ce n'est pas précis, peu importe ce qu'est le sélecteur. nth-childest appliqué après avoir trouvé l'élément, et il est nthcomparé à tout parent dont il dispose, qu'il soit dans le sélecteur ou non. Vous pouvez voir cela fonctionner ici: jsfiddle.net/JQQPz
— Nick Craver
que diriez-vous de changer uniquement le css d'un élément dans td: nth-child (2). Comme la balise <a>. va-t-il être td a: nth-child (2) {}?
— Ivo San
1
@ ivory-santos ajoutez simplement le aà la fin, par exemple td:nth-child(2) aaux liens de style sous cet élément.
— Nick Craver
Pourquoi avez-vous un tableau deux fois (contrairement aux autres réponses ci-dessous)?
— UlFie
26

Essaye ça:

.countTable table tr td:first-child + td

Vous pouvez également répéter 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 */
— Marco Panichi
source
1
J'ai opté pour cela dans une situation où les propriétaires du site gérant le code n'étaient pas des développeurs et cela leur a donné la possibilité de modifier l'alignement des colonnes dans leurs tableaux de données d'une manière très simple, bien qu'un peu verbeuse, avec des commentaires comme vous avez ici, leur a permis de savoir facilement quel bloc de sélecteur était pour quelle colonne à partir de la gauche. Encore une fois, ce n'est pas le moyen le plus élégant et efficace, mais cela a fonctionné!
— Eric Bishard
18

Pour modifier uniquement la deuxième colonne d'un tableau, utilisez ce qui suit:

Cas général:

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

background:red

}

Ton cas:

.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

— Abzoozy
source
Quel serait le réglage pour sélectionner simplement la première colonne? L'utilisation de la table td {...} sélectionne également toutes les cellules des autres colonnes.
— j4v1
1
@ j4v1 table td {background: red;} // la première colonne aura un arrière-plan rouge table td + td {background: blue;} // le reste aura du bleu
— Abzoozy
-2

Vous pouvez 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>
— Duniyadnd
source
Je ne peux pas utiliser ça. Comme je l'ai dit, ce n'est pas ma page et donc, je ne peux pas changer le code HTML.
2
@Duniyadnd ce n'est pas une bonne approche, comparée à la manière existante d'utiliser les sélecteurs.
— PM
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.