Alignez les points décimaux des nombres du tableau avec un pseudo alignement « central » apparaissant dans les cellules

Question

Je veux un tableau avec une colonne de nombres décimaux, avec des longueurs différentes avant et après la virgule décimale, et avec les virgules décimales toutes alignées.

Les largeurs des colonnes doivent être de taille « fluide » et s'étendre si nécessaire pour accueillir des nombres très longs dans les cellules de données, ou des en-têtes très longs associés à la colonne.

Les cellules contenant des entiers (sans points décimaux) doivent toujours afficher des nombres, les nombres étant alignés dans la même position que si le caractère décimal était présent. (Par exemple, le nombre 512 doit toujours s'aligner correctement avec une cellule qui ne contient que « 512 » au lieu de « 512 ».)

La police ne doit pas être pertinente ; un espacement fixe ne doit pas être requis.

Enfin, les nombres doivent également être centrés le plus possible dans la colonne tout en gardant les points décimaux (visibles et implicites !) alignés. Plus précisément, la largeur de « l'espace blanc gauche » de la cellule comportant le plus de caractères avant le caractère décimal (ou simplement la majorité des caractères si aucun caractère décimal n'est présent) doit être égale à la largeur de « l'espace blanc droit » de la cellule La largeur est la même. Cellule contenant le plus de caractères après le premier caractère décimal.

Pour la dernière exigence, j'ai spécifiquement dit « caractères » au lieu de « chiffres », car la disposition du tableau doit gérer les caractères symboliques tels que les signes plus/moins devant les nombres et les lettres comme les abréviations d'unités de mesure ajoutées après les nombres.

La spécification HTML 4.01 "par définition" permet de réaliser facilement de telles mises en page à l'aide de simples tableaux HTML. (Divisez les données par caractère décimal dans les deux cellules internes d'un groupe de 4 colonnes avec les deux colonnes externes width="*" 和内部两个 col width="0*"。右对齐包含数字整数部分的单元格，并将包含数字小数部分和小数部分的单元格左对齐。将这两个单元格设置为 nowrap，然后设置表格的 cellpadding="0" cellspacing =“0”规则=“组”.)

Mais beaucoup de gens disent que c'est mauvais et qu'il devrait être formaté en utilisant CSS au lieu de tableaux. J'ai également appris qu'un tableau contenant des données sémantiquement correctes devrait conserver ces nombres intacts dans une seule cellule. Mais je n'ai trouvé aucun moyen CSS pour obtenir le formatage souhaité !

Le simple fait de définir l'alignement du texte d'une seule colonne sur "Centré" ne maintient pas les points décimaux alignés.

Sauf erreur de ma part, utiliser align="char" ne fonctionne pas avec des entiers qui n'ont pas de point décimal explicite, mais qui doivent quand même être alignés comme s'ils avaient un point décimal.

L'ajout du caractère décimal à un entier, même si vous le masquez, rompt techniquement l'intégrité des données.

Le remplissage des données avec des espaces insécables ne fonctionne pas avec les polices proportionnelles (non monospaces). Ce type d’attaque de piratage peut également compromettre l’intégrité des données.

Spécifier la position via un décalage de pixels fixe ne permet pas à la colonne d'avoir une véritable largeur "liquide", le rendu étant nécessaire pour s'adapter au contenu de toutes les cellules de la colonne, y compris les cellules d'en-tête, qui peuvent contenir des données de n'importe quelle longueur à tout moment. .

JavaScript lit la largeur finale du tableau après le rendu, puis calcule dynamiquement le décalage des pixels, puis « glisse » l'alignement des données via le format de réécriture DOM, qui est lent et crée un bruit visuel lorsque les données sautent. C'est un hack carrément sale, encore plus sale que d'utiliser des tableaux pour la mise en page !

À mon avis, l'approche "puriste" mise en page CSS + données sémantiques HTML ne peut pas réaliser cette mise en page simple mais souvent nécessaire ! J'espère que quelqu'un pourra me prouver le contraire et me montrer comment faire cette mise en page "correctement".

Answer 1

Il existe une solution purement html/css, mais elle n'est pas jolie. Vous devez diviser la colonne alignée sur la décimale en deux colonnes sans remplissage entre elles. La première colonne contient des valeurs entières et est justifiée à droite, la deuxième colonne contient des valeurs décimales et fractionnaires.

customers	balance
John	4	.45
Jane	20
Jim	2,300	.64

Vous pouvez également utiliser des classes comme ".integer" et ".decimal" au lieu du sélecteur :nth-child. Ce serait plus robuste, mais j'essaie de garder le balisage court.