Donnez un style différent à la première colonne <td> d'un tableau

Question

Si j'ai un table avec deux colonnes, comment puis-je spécifier un padding ou tout autre css afin qu'il soit appliqué uniquement pour la première colonne de <td> s. Aussi, comment puis-je styliser un n-ième de la même façon ?

Answer 1

Vous pourriez utiliser le n-ième sélecteur d'enfants .

pour cibler le nième élément que vous pourriez alors utiliser :

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

(où n commence à 1)

Answer 2

Si vous devez prendre en charge IE7, une solution plus compatible s'impose :

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

Cela fonctionne aussi très bien avec li ; sélecteur général de fratrie ~ peut être plus approprié avec des éléments mixtes comme un titre h1 suivi de paragraphes ET un sous-titre puis à nouveau d'autres paragraphes.

Answer 3

En :nth-child() y :nth-of-type() Les pseudo-classes vous permettent de sélectionner des éléments à l'aide d'une formule.

La syntaxe est la suivante :nième-enfant(an+b) où vous remplacez a et b par les chiffres de votre choix.

Par exemple, :nth-child(3n+1) sélectionne le 1er, le 4e, le 7e, etc. enfant.

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

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

Pour plus d'informations sur nth-child https://developer.mozilla.org/es/docs/Web/CSS/:nth-child

Answer 4

Cela devrait aider. C'est CSS3 :first-child où vous devriez dire que le premier tr de la table que vous souhaitez styliser. http://reference.sitepoint.com/css/pseudoclass-firstchild

Answer 5

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

tr td:nth-child(1n + 2){
  padding-left: 10px;
}