Alignement des points décimaux en HTML

Question

J'ai un tableau contenant des nombres décimaux dans une colonne. Je cherche à les aligner d'une manière similaire à la fonction "tabulation décimale" d'un traitement de texte, de façon à ce que tous les points se trouvent sur une ligne verticale.

J'ai deux solutions possibles pour le moment mais j'espère quelque chose de mieux...

Solution 1 : divisez les chiffres dans le HTML, par exemple.

<td><div>1234</div><div class='dp'>.5</div></td>

avec

.dp { width: 3em; }

(Oui, cette solution ne fonctionne pas tout à fait telle quelle. Le concept est cependant valable).

Solution 2 : J'ai trouvé une mention de

<col align="char" char=".">

Cela fait partie de HTML4 selon la page de référence, mais cela ne fonctionne pas dans FF3.5, Safari 4 ou IE7, qui sont les navigateurs que j'ai sous la main. Il y a aussi le problème que vous ne pouvez pas extraire le formatage numérique en CSS (bien que, puisque cela affecte une colonne entière, je suppose que ce n'est pas trop surprenant).

Ainsi, quelqu'un a une meilleure idée ?

Answer 1

Voir cet article par Krijn Hoetmer pour vos options et la manière d'y parvenir.

Answer 2

Une autre façon de formater un nombre serait comme ceci : 35<span style="color:transparent">.000</span> . C'est-à-dire qu'il faut l'écrire avec l'expansion décimale complète, mais écrire les décimales de queue à l'encre invisible. Ainsi, vous n'avez pas à vous soucier de la largeur de la virgule.

Answer 3

Tricher ; avantage de cette solution : fonctionne aussi pour les polices proportionnelles. Ayez une colonne supplémentaire et séparez la partie entière du séparateur décimal et des décimales. Utilisez ensuite cette css :

table{border-collapse:collapse;}
td{padding:0px;margin:0px;border:0px;}
td+td{text-align:right;}
td,td+td+td{text-align:left;}

combine deux colonnes dans la ligne d'en-tête :

<table>
    <tr><th>Name</th><th colspan=2>Height</th></tr>
    <tr><td>eiffeltower</td> <td>324</td> <td></td></tr>
    <tr><td>giraffe</td> <td>5</td> <td>,30</td></tr>
    <tr><td>deer</td> <td>1</td> <td></td></tr>
    <tr><td>mouse</td> <td>0</td> <td>,03</td></tr>
</table>

Answer 4

J'ai joué avec jquery et j'ai trouvé ceci...

html

table width="600" border="1">  
  <tr><th></th><th>Aligned Column</th></tr>
  <tr><th>1st Row</th><td class='aBDP'>1.1</td></tr>
  <tr><th>2nd Row</th><td class='aBDP'>10.01</td></tr>  
  <tr><th>3rd Row</th><td class='aBDP'>100.001</td></tr>  
  <tr><th>4th Row</th><td class='aBDP'>1000.0001</td></tr>
</table>

javascript

$(document).ready(function() {
  $('.aBDP').each(function() {
    var wholePart, fractionPart;
    wholePart = Math.floor($(this).text()-0);
    fractionPart = Math.floor(($(this).text() % 1)*10000 + 0.5) / 10000 + "";
    html  = '<span class="left">' + wholePart + '.' + '</span>';
    html += '<span class="right">' + fractionPart.substring(2) + '</span>';
    $(this).html(html); 
  })
})

css

.right {
    text-align: left;
}
.left {
    float:left;
    text-align: right;
    width:10em;
}

cela semble fonctionner

Answer 5

Pouvez-vous simplement imprimer les chiffres de manière à ce qu'ils aient toujours le même nombre de décimales, et les aligner à droite ?