22 Voix

HTML/CSS: Aligner Colonne de Table entière à droite ou centrée

Question de Compi | 17/07/2021 à 22:14

J'ai une grande table HTML dans laquelle je veux aligner le texte d'une colonne complète, soit aligné droit ou centré.

Jusqu'à présent, je ne connais que la possibilité d'alignement de configurer CSS inline pour chaque élément TD de la table, par exemple comme celle-ci:

...
<tr>
  <td>contenu aligné à gauche</td>
  <td style="text-align:center">contenu centré</td>
  <td style="text-align:right">contenu aligné à droite</td>
</tr>
...

Le problème est évident: je dois répéter le texte-alignement du CSS pour chaque ligne de table (TR) - et comme je l'ai dit, dans mon cas, sont beaucoup des rangées.

Alors, n'y a-t-il aucune autre possibilité plus pratique de faire cela? Par exemple, en définissant certains CSS ou HTML une seule fois à une position centrale ou une seule fois par colonne? Ou au moins une solution plus simple que cela?

RépondrePositifNégatifDateVoix
2Meilleure Réponse2 Voix

Vous pouvez par exemple utiliser le sélecteur pseudo CSS nth-child.

Voici un exemple pour une règle CSS possible:

table.colright td:nth-child(2) {
  text-align: right;
}

Ensuite, il vous suffit d'attribuer la classe CSS définie à votre table:

<table class="colright">
  <tr><td>A</td><td>B</td><td>C</td></tr>
  <tr><td>A</td><td>B</td><td>C</td></tr>
  <tr><td>A</td><td>B</td><td>C</td></tr>
</table>

Avec td:nth-child(2), vous sélectionnez chaque deuxième élément TD. Dans chaque ligne commençant par TR, le comptage est réinitialisé de sorte qu'il suffit d'attribuer la classe une fois à votre table entière pour toujours aligner la deuxième colonne complète.
20/07/2021 à 20:05

RépondrePositif Négatif
11 Vote

Pour soutenir également les navigateurs plus anciens qui ne peuvent pas gérer nth-child, vous pouvez utiliser le CSS suivant:

table.colright td + td + td {
  text-align: right;
}

En utilisant ce sélecteur CSS, vous sélectionnez chaque colonne respectivement à chaque élément TD avant laquelle deux autres éléments TD sont.

Ainsi, avec ce CSS, vous alliez aligner droit chaque troisième colonne de chaque table ayant attribué la classe "colright".
21/07/2021 à 11:52

RépondrePositif Négatif
00 Voix

Si vous voulez seulement le rendre plus court que <td style="text-align:center"> vous pouvez également définir la classe CSS ralign {text-align:center}, puis écrivez <td class="ralign"> pour chaque cellule vous voulez aligner droit.
22/07/2021 à 06:07

RépondrePositif Négatif
Répondre

Sujets Connexes

CSS: Comment inclure CSS dans HTML

Tutoriel | 0 Commentaires

Avis Important

Veuillez noter: Les contributions publiées sur askingbox.com sont des contributions d’utilisateurs et ne doivent pas remplacer les conseils d’un professionnel. Ils ne sont pas vérifiés par des indépendants et ne reflètent pas nécessairement l’opinion de askingbox.com. Apprendre encore plus.

Participer

Posez votre propre question ou écrivez votre propre article sur askingbox.com. Voici comment.