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

Il y a des milliers d'années (ou 2-3), j'ai écrit une cale jQuery qui émule align="char" et qui semble toujours fonctionner. Il utilise le padding CSS et tient compte des colspans, c'est donc modérément intelligent, mais ce n'est vraiment pas un code très joli (je débutais en javascript à l'époque). J'aimerais que quelqu'un le réécrive (et en retire tout le mérite).

En attendant, voyez si cela peut vous aider : http://inanimatt.com/decalign/

Trivia : La raison pour laquelle les navigateurs ne prennent pas correctement en charge les styles de colonnes est que les tableaux sont des structures de données en 2D et que le DOM (sur lequel Javascript et CSS opèrent, et comment HTML5 est défini) est purement hiérarchique et ne peut donc pas représenter à la fois les colonnes et les lignes. Au lieu de cela, il définit simplement les rangées et les cellules, et ne représente pas du tout les colonnes.

Answer 2

J'aime les réponses courtes, même si les longues sont importantes aussi, donc j'ai aimé ;

35<span style="color:transparent">.000</span>

et je voudrais juste ajouter ;

<TD><div style='float:right;'><?php echo number_format($totalAmount,2); ?></div></TD>

juste pour ajouter php au mélange. Cela dépend encore beaucoup des polices à largeur fixe, mais la dernière solution me convient. Comme les données sont déjà sous forme de tableaux, ajouter un autre tableau dans une cellule demande trop de travail et est difficile à maintenir.

Answer 3

Si les chiffres sont en monospace, on peut utiliser le javascript pour ajuster le remplissage de la cellule (en ems), en fonction du nombre de chiffres avant la virgule. Sinon, cela pourrait être délicat.

Answer 4

La fonction réalisée par Krijn Hoetmer interfère avec prettyPhoto ( http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/ ) donc j'ai fait une version jQuery. La partie monnaie est supprimée car elle devrait être rendue dynamique au lieu de remplacer des chaînes de caractères basées sur des monnaies prédéfinies.

La fonction vide de phpjs est nécessaire : http://phpjs.org/functions/empty:392 .

Le jQuery utilisé, est la version 1.6.

/* This function will align table columns on the char if in the col from the 
 * colgroup has the property 'align="char"' and a attribute 'char'. The alignment
 * is done on the first occurence of the specified char.
 * 
 * The function is inspired from:
 * 
 * http://krijnhoetmer.nl/stuff/javascript/table-align-char/
 * http://stackoverflow.com/questions/1363239/aligning-decimal-points-in-html
 */
function alignNumbers()
{
  var table; /* This will store the table currently working on . */
  var i = 0; /* Every column can have it's own width, the counter makes the class name unique. */

  /* Get all tables for which the alignment fix must be done. 
   *
   * Note: this could even be further optimized by just looking for tables where
   * there is a a col with 'align="char"'. 
   */
  $('table.fix-align-char').each(function(index)
  {
    table = $(this);

    /* All table columns are fetched to have a correct index, without it it's
     * hard to get the correct table cells.
     */
    $(this).find('col').each(function(index)
    {
      /* Only those table cells are changed for which the alignment is set to
       * char and a char is given.
       */
      if ($(this).prop('align') == 'char' && !empty($(this).attr('char')))
      {
        /* Variables for storing the width for the left and right part (in pixels). */
        var left_width = 0, right_width = 0;
        var col, left_part, right_part, parts, new_html;
        i++; /* Increase the counter since we are working on a new column. */
        col = $(this);

        /* For the col index + 1 (nth-child starts counting at 1), find the table
         * cells in the current table.
         */
        table.find('> tbody > tr > td:nth-child('+ (index + 1) +')').each(function(index)
        {
          /* Split the html on the specified char. */
          parts = $(this).html().split(col.attr('char'));
          new_html = '';

          /* The first element is always the left part. The remaining part(s) are
           * the right part. Should there be more chars in the string, the right
           * parts are rejoined again with the specified char. 
           */
          left_part = parts.shift();
          right_part = parts.join(',');

          /* Add a left part to the new html if the left part isn't empty*/
          if (!empty(left_part))
          {
            new_html = new_html + '<span class="left">' + left_part + '</span>';
          }

          /* Add the specified char and the right part to the new html if 
           * the right part isn't empty*/
          if (!empty(right_part))
          {
            new_html = new_html + col.attr('char') + '<span class="right">' + right_part + '</span>';
          }

          /* If there is a new html, the width must be determined and a class is
           * added.
           * 
           * Note: outerWidth is used instead of width so padding, margin and
           * borders are taken into account.
           */
          if (!empty(new_html))
          {
            $(this).html(new_html); /* Set the new html. */
            $(this).addClass('char-align-' + i); /* Add a class to the table cell. */

            /* Get the left span to determine its outer width. */
            leftSpan = $(this).children('.left');

            if (!empty(leftSpan) && left_width < leftSpan.outerWidth())
            {
              left_width = leftSpan.outerWidth();
            }

            /* Get the right span to determine its outer width. */
            rightSpan = $(this).children('.right');

            if (!empty(rightSpan) && right_width < rightSpan.outerWidth())
            {
              right_width = rightSpan.outerWidth();
            }

          }

        });

        /* Only if any width is larger then 0, add a style. */
        if (left_width > 0 || right_width > 0)
        {
          style_text = '<style type="text/css">.fix-align-char td.char-align-' + (i) + ' span.left { float: left; text-align: right; width: ' + (left_width) + 'px; }\n.fix-align-char td.char-align-' + (i) + ' span.right { float: right; text-align: left; width: ' + right_width + 'px; }</style>';
          $('head').append(style_text);
        }

      }
    });
  });

}

$(document).ready(function(){
  alignNumbers();
});