Aligner une colonne d'un tableau

Bonjour,
J'ai créé un tableau que voici ci-dessous :
http://jsfiddle.net/W6U53/73/

Je voudrais aligner les valeurs de la colonne "Nb docs" à droite.
Pouvez-vous m'aider svp ?

Bonjour,

Le plus rapide (attention si au final tu as plus de 2 colonnes ça va mettre toutes les colonnes sauf la première à droite) :

td + td {
  text-align: right;
}

Si tu as plusieurs tableau sur la meme page il faudra spécifier un peu du genre :

.display td + td {
  text-align: right;
}

Le plus propre serait de mettre une classe "number" par exemple sur les td concernés :

<td class="number">75</td>

.number {
  text-align: right;
}

Modifié par _laurent (19 Aug 2016 - 10:37)

Sinon :

tr td:nth-of-type(2) {
	text-align: right;
}

ou, pour un tableau à deux colonnes :

tr td:last-of-type {
	text-align: right;
}

Sinon, à quoi servent les ids de la première colonne de ton tableau ? Des classes ne seraient-elles pas plus appropriées, au cas où tu devrais créer d'autres tableaux ?
Modifié par thierry (19 Aug 2016 - 11:59)

Vos solutions sont super ! Merci à tous les 2

Ah oui, j'oubliais :

Je ne sais pas quelles versions d'IE tu cibles, mais je crois que la solution de _laurent... :

td + td {
	text-align: right;
}

... fonctionne sur des versions plus anciennes d'IE que les miennes.

Si tu cibles des vieilles versions d'IE, il faudrait que tu testes.

Bon, ses autres solutions avec des classes sont tout aussi valables, simplement, je n'aime pas utiliser des classes quand on peut faire autrement, pour des raisons de simplicité du code (préférences personnelles).
Modifié par thierry (19 Aug 2016 - 21:51)

thierry a écrit :
Bon, ses autres solutions avec des classes sot tout aussi valables, simplement, je n'aime pas utiliser des classes quand on peut faire autrement, pour des raisons de simplicité du code (préférence personnelles).

Au contraire l'utilisation d'une classe rend le CSS plus clair, plus maintenable et plus performant.
- ".cell-number" par exemple sera plus compréhensible qu'un "td + td"
- on pourra l'appliquer à n'importe quelle autre case sans se soucier de son emplacement, même si c'est la première seulement sur la ligne 4
- une classe est plus rapide à interpréter qu'un sélecteur complexe comme celui là
- le css restera indépendant du HTML (si un jour tu décide d'ajouter une colonne par exemple)

Mais les préférences perso peuvent prendre le pas dessus (et le font souvent)

Bonne journée à vous deux

Si celle de _laurent fonctionne aussi pour moi

Avez-vous des compétences en JS ?

Bin, non, pas moi, désolé

Sinon, je pense qu'il serait préférable que tu ouvres un nouveau sujet et que tu précise ta demande.

Bonne soirée.

@lucil :

Il y a une autre possibilité. Les cellules de la première colonne de ton tbody doivent-elles être considérées comme des cellules de texte (<td>) ou comme des cellules de titre ?

Dans l'éventualité où tu l'ignorerais, on peut très bien mettre des th en première colonne d'un tbody, mais il est préférable que ça se justifie sémantiquement (en tout cas, je ne le ferais que dans ce cas).

Dans ce cas, la solution serait simple :

td {
	text-align: right;
}

Bonne continuation.