Meilleure façon d'aligner le texte à droite dans le tableau HTML

Question

J'ai un tableau HTML avec un grand nombre de lignes, et j'ai besoin d'aligner à droite d'une colonne.

Je sais que l'une des façons suivantes

<tr><td>..</td><td>..</td><td align='right'>10.00</td><tr>

et

<tr><td>..</td><td>..</td><td class='right-align-class'>10.00</td><tr>

Dans les deux méthodes, je dois refaire l'alignement ou de la classe paramètre sur chaque <tr> balise. (Si il y a 1000 lignes, je dois mettre align= "right" ou class='aligner à droite" de classe 1000 fois).

Est-il une manière efficace de faire cela ? Est-il un moyen direct de le dire, aligner la troisième colonne dans toutes les lignes à droite ?

Answer 1

Pour répondre directement à votre question: non. Il n'y a pas de moyen plus simple pour obtenir une apparence cohérente à travers tous les navigateurs modernes, sans répéter la classe sur la colonne. (Bien que, voir ci-dessous re: nth-child.)

Ce qui suit est le moyen le plus efficace pour ce faire.

HTML:

<table class="products">
  <tr>
    <td>...</td>
    <td>...</td>
    <td class="price">10.00</td>
    <td>...</td>
    <td>...</td>
  </tr>
  <tr>
    <td>...</td>
    <td>...</td>
    <td class="price">11.45</td>
    <td>...</td>
    <td>...</td>
  </tr>
</table>

CSS:

table.products td.price {
  text-align: right;
}

Pourquoi vous ne devriez pas utiliser nth-child:

Le CSS3 pseudo-sélecteur, nth-child, ce serait parfait pour cela, et beaucoup plus efficace, mais il est peu pratique pour une utilisation sur le web tel qu'il existe aujourd'hui. Il n'est pas pris en charge par plusieurs grands navigateurs modernes, y compris tous les IE à partir de 6-8. Malheureusement, cela signifie que nth-child est pas pris en charge dans une proportion significative (au moins 40%) des navigateurs d'aujourd'hui.

Donc, nth-child est génial, mais si vous voulez une apparence cohérente, c'est juste pas possible à utiliser.

Answer 2

Vous pouvez utiliser l' nth-child pseudo-sélecteur. Par exemple:

table.align-right-3rd-column td:nth-child(3)
{
  text-align: right;
}

Puis dans votre tableau:

<table class="align-right-3rd-column">
  <tr>
    <td></td><td></td><td></td>
    ...
  </tr>
</table>

Edit:

Malheureusement, cela ne fonctionne que dans Firefox 3.5. Toutefois, si votre table a seulement 3 colonnes, vous pouvez utiliser le sélecteur de frères, qui a beaucoup plus de prise en charge du navigateur. Voici ce que la feuille de style pourrait ressembler à:

table.align-right-3rd-column td + td + td
{
  text-align: right;
}

Cela va correspondre à n'importe quelle colonne, précédé par deux autres colonnes.

Answer 3

Si c'est toujours la troisième colonne, vous pouvez l'utiliser (en supposant que le tableau de la classe des "produits"). C'est un peu hacky bien, et pas solide si vous ajoutez une nouvelle colonne.

table.products td+td+td {
  text-align: right;
}
table.products td,
table.products td+td+td+td {
  text-align: left;
}

Mais honnêtement, la meilleure idée est d'utiliser une classe dans chaque cellule. Vous pouvez utiliser l' col élément pour définir la largeur, bordure, fond, ou la visibilité d'une colonne, mais pas toutes les autres propriétés. Les raisons discutées ici.

Answer 4

En regardant votre question exacte à votre problème implicite :

Étape 1: utilisez la classe comme vous l'avez décrit (ou, si vous le devez, utilisez des styles en ligne).

Étape 2: activez la compression GZIP.

Fonctionne à merveille;)

De cette façon, GZIP supprime la redondance pour vous (sur le fil, de toute façon) et votre source reste conforme aux normes.

Answer 5

Cela ne fonctionne pas dans IE6, ce qui peut être un problème, mais cela fonctionnera dans IE7 + et Firefox, Safari, etc. Il alignera la 3e colonne à droite et toutes les colonnes suivantes à gauche.

 td + td + td { text-align: right; }
td + td + td + td { text-align: left; }