Aligning decimal points in HTML

user_87583 0
Viewed 64053

I have a table containing decimal numbers in one column. I'm looking to align them in a manner similar to a word processor's "decimal tab" feature, so that all the points sit on a vertical line.

I have two possible solutions at the moment but I'm hoping for something better...

Solution 1: Split the numbers within the HTML, e.g.

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

with

.dp { width: 3em; }

(Yes, this solution doesn't quite work as-is. The concept is, however, valid.)

Solution 2: I found mention of

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

This is part of HTML4 according to the reference page, but it doesn't work in FF3.5, Safari 4 or IE7, which are the browsers I have to hand. It also has the problem that you can't pull out the numeric formatting to CSS (although, since it's affecting a whole column, I suppose that's not too surprising).

Thus, anyone have a better idea?

css html
13 Answers

I'm surprised that in 10 years of answers to this question, nobody ever mentioned the Unicode character 'FIGURE SPACE' (U+2007, &#8199;)

It's a whitespace character that is designed (by font authors, if they follow the standard) to be the same width as digits and to keep its spacing, like its more famous cousin the No-Break Space. You can use it to pad numbers to a certain string size, either on the left or on the right hand side, taking care of aligning the column or div on the same side.

Examples, both left-aligned and left-padded with figure spaces:

<p style="font-family: sans-serif">
  10000 <br>
  &#8199;&#8199;123.4 <br>
  &#8199;&#8199;&#8199;&#8199;3.141592
</p>

<p style="font-family: serif">
  10000 <br>
  &#8199;&#8199;123.4 <br>
  &#8199;&#8199;&#8199;&#8199;3.141592
</p>

user_5173710

I have used JavaScript to fix this issue... This is my HTML.

<body>
<table id="nadis">

</tr>
</table>

</body>

This is my JavaScript.

var numarray = ["1.1", "12.20", "151.12", 1000.23,12451];
var highetlen = 0;
for(var i=0; i<numarray.length; i++){
    var n = numarray[i].toString();
  var res= n.split(".");
  n = res[0];

  if(highetlen < n.length){
    highetlen = n.length;
  }

}

for(var j=0; j<numarray.length; j++){
    var s = numarray[j].toString();
  var res= s.split(".");
  s = res[0];

    if(highetlen > s.length){
  var finallevel = highetlen - s.length;

  var finalhigh = "";
  for(k=0;k<finallevel;k++){
  finalhigh = finalhigh+ '&#160; ';
  }
    numarray[j] = finalhigh + numarray[j];
  }
  var nadiss = document.getElementById("nadis");
  nadiss.innerHTML += "<tr><td>" + numarray[j] + "</td></tr>";
}
user_62839970

A serious trouble in the previous approaches, is that only think in visual, but do not in other needs or uses of tables as sorting or filtering, where pure data is important.

Unfortunately CSS4 are not available yet. Then a valid solution could be pass the value and units or type unit in data attributes on td cell.

<!-- HTML-->
<table>
  <tbody>
    <tr>
      <td data-value="1876.67542" data-unit="USD"></td>
    </tr>
  </tbody>
</table>

If a cell have a data value, it must read with javascript and updated to the decimal numbers that we requires.

// Javascript
let $td_value = document.querySelectorAll( 'td[data-item]' );
Array.from( $td_value ).forEach( $r => {
  $r.textContent = parseFloat( $r.getAttribute('data-value') ).toFixed(2);
});

At the end, when we have normalized data, they will looks great with mono fonts and with their units placed using css selectors as before or after.

/* CSS */
td[data-value]{
  font-family: monospace;
  text-align: right;
}
td[data-unit]::after{
  content: attr(data-unit]);
  font-size: 85%;
  padding-left: .2em;
  opacity: .6;
}

I put an extended example in: https://jsfiddle.net/jam65st/wbo63xpu/12/

user_31735670

Ugly workaround but will save you from writing a lot of code: You can find the max number in the array (list) of prices, then you can take the number of its digits and set inline style "width": (maxNumberDigits * 10)px - this is the ugly part! And the container of this data (cell if its table) should have additionally

display:flex;
justify-content: flex-end;

Result:

Result

user_120261590
Related