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.


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 */

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


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>

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.