web-dev-qa-db-fra.com

Style la première colonne <td> d'une table différemment

Si j'ai un table avec deux colonnes, comment puis-je spécifier un padding ou tout autre fichier CSS pour qu'il soit appliqué uniquement à la première colonne de <td>s. Aussi, comment styler une colonne n-th de la même manière?

csscss-selectorspadding
55
Shalin

Vous pouvez utiliser le n-ème sélecteur d’enfant .

pour cibler le nième élément, vous pouvez ensuite utiliser:

td:nth-child(n) {  
  /* your stuff here */
}

(où n commence à 1)

119
RRikesh

Si vous avez besoin de supporter IE7, une solution plus compatible est:

/* only the cells with no cell before (aka the first one) */
td {
    padding-left: 20px;
}
/* only the cells with at least one cell before (aka all except the first one) */
td + td {
    padding-left: 0;
}

Fonctionne aussi très bien avec li; sélecteur de frères et sœurs général ~ peut être plus approprié avec des éléments mixtes comme un en-tête h1 suivi de paragraphes ET d'un sous-titre, puis à nouveau d'autres paragraphes.

9
FelipeAls

Cela devrait aider. Son CSS3: premier-enfant où vous devriez dire que le premier tr de la table que vous souhaitez styler. http://reference.sitepoint.com/css/pseudoclass-firstchild

4
tiantang

Les pseudo-classes : nth-child () et : nth-of-type () vous permettent de sélectionner des éléments avec une formule.

La syntaxe est : nth-child (an + b), où vous remplacez a et b par les nombres de votre choix.

Par exemple, n-enfant (3n + 1) sélectionne le 1er, le 4ème, le 7ème enfant, etc.

td:nth-child(3n+1) {  
  /* your stuff here */
}

: nth-of-type () fonctionne de la même manière, sauf qu'il ne considère que les éléments du type donné (dans l'exemple).

3
MS Ibrahim

Pour sélectionner la première colonne d'un tableau, vous pouvez utiliser cette syntaxe

tr td: nième enfant (1n + 2) {padding-left: 10px;}

1
Saptarshi Banerjee