web-dev-qa-db-fra.com

Existe-t-il un moyen de définir l'alignement du texte de la colonne entière dans un tableau?

Existe-t-il un moyen simple de définir l'alignement du texte de toutes les cellules de la deuxième colonne sur right?

Ou est-ce que la seule façon est de définir l'alignement pour chaque cellule de la colonne?

(Malheureusement, l'attribut align de la balise col n'est pas pris en charge dans Firefox.)

htmlcssfirefoxalignmentcss-tables
45
Misha Moroshko

Ajoutez une classe à chaque cellule de la 2e colonne.

.second {
   text-align: right;
}

Vous pouvez également utiliser CSS3.

tr td:nth-child(2) { /* I don't think they are 0 based */
   text-align: right;
}

(Cela ne fonctionnera pas dans <= IE8)

44
alex

Bien que n'étant pas particulièrement élégant, j'aime lancer quelque chose comme ça dans mon fichier css à l'échelle du site:

.tr1 td:nth-child(1), .tr1 th:nth-child(1),
.tr2 td:nth-child(2), .tr2 th:nth-child(2),
.tr3 td:nth-child(3), .tr3 th:nth-child(3),
.tr4 td:nth-child(4), .tr4 th:nth-child(4),
.tr5 td:nth-child(5), .tr5 th:nth-child(5),
.tr6 td:nth-child(6), .tr6 th:nth-child(6),
.tr7 td:nth-child(7), .tr7 th:nth-child(7),
.tr8 td:nth-child(8), .tr8 th:nth-child(8),
.tr9 td:nth-child(9), .tr9 th:nth-child(9) { text-align:right }

.tc1 td:nth-child(1), .tc1 th:nth-child(1),
.tc2 td:nth-child(2), .tc2 th:nth-child(2),
.tc3 td:nth-child(3), .tc3 th:nth-child(3),
.tc4 td:nth-child(4), .tc4 th:nth-child(4),
.tc5 td:nth-child(5), .tc5 th:nth-child(5),
.tc6 td:nth-child(6), .tc6 th:nth-child(6),
.tc7 td:nth-child(7), .tc7 th:nth-child(7),
.tc8 td:nth-child(8), .tc8 th:nth-child(8),
.tc9 td:nth-child(9), .tc9 th:nth-child(9) { text-align:center }

Ensuite, spécifiez simplement les numéros de colonne que vous souhaitez aligner au centre ou à droite, c'est-à-dire si vous voulez que les colonnes 2 et 7 soient alignées à droite et 3 centrées, faites simplement:

<table class="tr2 tc3 tr7">

Bien que le CSS ne soit pas super élégant, les alternatives sont encore moins élégantes: c'est-à-dire une classe personnalisée pour chaque table, ou nécessitant que chaque tr ait un class="ralign" ou similaire.

ne fonctionne pas avec IE8

14
Stephen Fuhry

Je crois que ce qui suit fonctionnerait et ne nécessiterait pas d'annoter la deuxième cellule de chaque ligne avec une classe.

td:first-child + td { text-align: right; }

Cette règle sélectionnerait un td immédiatement après un td qui est le premier enfant de son parent. Dans un tableau typique, cela sélectionnerait la deuxième cellule de chaque ligne.

14
smarcaurele

L'ajout d'une classe à chaque cellule ou cellule d'une ligne dans la deuxième colonne fonctionnera.

.second {
   text-align: right;
}

o

ajoutez la classe à tr et ajoutez le CSS suivant dans votre feuille de style.

tr.second {
   text-align: right;
}
0
Vijender Reddy