Comment styler chaque cellule de tableau dans une colonne via CSS?

J’ai un tableau HTML ordinaire:

FAT ...
FAT ...

Je veux appliquer le style CSS à chaque cellule de table ( td ) d’une colonne particulière. Est-il possible de le faire sans appliquer l’atsortingbut class / style à chaque cellule de tableau de cette colonne et sans JavaScript?

Utilisez la

et collez-la en suivant ce guide . De cette façon, il vous suffit d’append une classe (ou une spécification de style en ligne) à l’élément

au lieu de chaque

dans la table.

Mises en garde:

  • Toute ligne ou style de cellule remplacera le style de colonne.
  • La
    ne prend en charge que la border , l’ backgroundbackground , la width et la visibility style (et leurs dérivés, tels que la background-color ).
  • La déclaration de border ne fonctionne pas à moins que le

    soit border-collapse: collapse; , et le comportement est incohérent entre les navigateurs.

  • La déclaration de visibility ne fonctionne pas correctement dans Chrome en raison d’un bogue connu .

En plus de la solution de Sean Pasortingck Floyd, vous pouvez combiner :first-child avec le sélecteur de frère adjacent + (non pris en charge par IE6):

 td:first-child { /* first column */ } td:first-child + td { /* second column */ } td:first-child + td + td { /* third column */ } /* etc. */ 

2015 réponse, et basé sur la réponse du premier enfant, mais beaucoup plus propre.

https://developer.mozilla.org/en-US/docs/Web/CSS/%3Anth-child

 td:nth-child(1) { /* first column */ } td:nth-child(2) { /* second column */ } td:nth-child(3) { /* third column */ } 

Code super propre

Pour la première et la dernière colonne, vous pouvez utiliser la pseudo-classe: :first-child et :last-child :

 /* make the first cell of every row bold */ tr td:FIRST-CHILD{ font-weight:bold; } /* make the last cell of every row italic */ tr td:LAST-CHILD{ font-style:italic; } 

Référence:

  • : premier enfant et: dernier enfant

Ce qui suit vous permet de styliser les colonnes au niveau de la table et peut être utilisé de manière plus générale dans les exemples précédents, car vous n’avez pas à faire d’hypothèses sur les styles appliqués à un index de colonne donné dans la feuille de style.

Je suis d’accord que l’approche

est la meilleure si elle répond à vos besoins, mais la gamme de styles est très limitée.

Les styles exemple colonne 1, 2 et 4 avec un style de texte gris.

HTML

 

CSS

 .example.col1-readonly tr td:nth-child(1), .example.col2-readonly tr td:nth-child(2), .example.col3-readonly tr td:nth-child(3), .example.col4-readonly tr td:nth-child(4) { color:#555; } 

Aucune de ces solutions n’est acceptable; Il semble qu’il n’y ait actuellement aucun moyen unique de spécifier les propriétés d’une cellule car il n’y a nulle part où append une classe ou un identifiant à une colonne.

Je pense que cette fonctionnalité n’aurait pas dû être déconseillée sans une alternative générique. Il n’y a absolument aucune justification raisonnable pour forcer les codeurs à connaître l’index numérique d’une table html ou à spécifier une classe dans chaque cellule de table afin de la styliser.