Est-il un moyen de définir l'alignement du texte de l'ensemble de la colonne dans une table?

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

Ou est le seul moyen est de définir l'alignement de chaque cellule dans la colonne?

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

InformationsquelleAutor Misha Moroshko | 2010-12-16

44

Ajouter une classe pour chaque cellule dans la 2ème 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;
}
```
(Il ne fonctionnera pas dans <= IE8)
- Tu veux sans doute dire à chaque cellule dans la deuxième colonne. C'est ce que j'ai bien à faire. Je me demande juste si il y a une jolie manière...
- CSS3 permettent de le faire dans une jolie manière, mais il n'est pas pris en charge dans tous les navigateurs pour l'instant.
- Si vous utilisez tr td:first-child + td { text-align:right; } il fonctionne sur IE<=8.
- Wow! Avez-vous cela comme une réponse quelque part? Je veux upvote il.
- En fait, vous pouvez trouver la même réponse ci-dessous, à partir de smarcaurele. Merci à vous de toute façon.
- OK. Mais cette réponse ne mentionne pas qu'il fonctionne dans IE8, qui est la raison pour moi d'aller à la recherche! (Appelez-moi idiot, mais je n'ai jamais réalisé que si un certain navigateur ne gère pas les :nth-child(3), il peut encore gérer :first-child + * + * correctement.)
- Oui, j'ai été en utilisant :first-child + * depuis quelques années et jamais eu de problèmes avec IE8. first-child ne fonctionne pas dans IE7 si le premier élément est un commentaire HTML bien, c'est le seul bug que j'ai trouvé.
- Malheureusement, ce n'est pas d'aller travailler avec colspans.
InformationsquelleAutor alex
14

Je crois que la suivante serait de travailler et de ne pas exiger l'annotation de la deuxième cellule de chaque ligne avec une classe.
```
td:first-child + td { text-align: right; }
```
Cette règle serait de sélectionner un td immédiatement à la suite d'un td qui est le premier enfant de son parent. Typiques de la table, ce serait de sélectionner la deuxième cellule de chaque ligne.
- Exemple ici: jsfiddle.net/FufTA
InformationsquelleAutor smarcaurele

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

.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 }

Puis il suffit de spécifier les numéros de colonne que vous souhaitez center ou aligné à droite, c'est à dire si vous voulez la colonne 2 & 7 aligné à droite, et 3 centré, il suffit de faire:

<table class="tr2 tc3 tr7">

Alors que le CSS n'est pas super élégant, les solutions sont encore moins élégant: c'est à dire une classe personnalisée pour chaque table, ou exigeant de chaque tr d'avoir un class="ralign" ou similaire.

Ne fonctionne pas avec IE8

C'est en fait assez élégant. Je cherchais quelque chose comme cela, et je suis moi-même coups de pied pour ne pas avoir pensé à moi-même.

InformationsquelleAutor Stephen Fuhry

1

Peu en retard à la fête, mais j'ai juste eu ce problème moi-même donc j'ai pensé partager une résolution. Il est intéressant de noter que cette réponse est applicable uniquement si vous utilisez MOINS.

Au lieu d'avoir à ajouter manuellement la classe ou le style de chaque cellule, vous pouvez utiliser des boucles en MOINS à créer une gamme de classes que vous pouvez appliquer à vos tables:
```
//Loop for @i until @i = @n
//Much like - for($i=0; $i<=$n; $i++)
//
.table-cols(@n, @i: 1) when (@i =< @n)
{
.table-center-col-@{i}
{
tr > td:nth-child(@{i})
{
text-align: center;
}
}
.table-right-col-@{i}
{
tr > td:nth-child(@{i})
{
text-align: right;
}
}
//Continue the iteration
.table-cols(@n, (@i + 1));
}
.table-cols(16);
```
Ceci va produire une charge de classes telles que .table-center-col-1 tout le chemin jusqu'à .table-center-col-16 (dans cet exemple) et de faire du centre le texte de la colonne applicable. Il permettra également de faire de même pour un texte aligné à droite, avec .table-right-col-n.

Vous pouvez ajuster le nombre fourni (à partir de 16 ans) à quoi que ce soit pour s'assurer qu'il couvre le montant maximal de colonnes que vous pouvez avoir dans une table. Pour la variable de la colonne de chiffres, cela ne sera pas beaucoup vous aider.

Puis tout ce que vous avez à faire est de l'appliquer à la table:
```
<table class="table-center-col-4">
<thead>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
<td>Column 4</td>
<td>Column 5</td>
</tr>
</thead>
<tbody>
<tr>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
</tr>
</tbody>
</table>
```
De toutes les cellules dans la 4ème colonne auront maintenant le texte centré.

InformationsquelleAutor Luke
0

Ajout d'une classe à chaque cellule ou cellule dans une ligne dans la deuxième colonne du travail.
```
.second {
   text-align: right;
}
```
ou

ajouter une classe pour tr et ajouter le code css suivant dans votre feuille de style.
```
tr.second {
text-align: right;
}
```
InformationsquelleAutor Vijender Reddy

Vous devez vous connecter pour publier un commentaire.