Aligning decimal points in HTML

Question

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?

Answer 1

See this article by Krijn Hoetmer for your options and how to achieve this. The essence of this solution is to use CSS and JS to achieve this:

(function() {    var currencies = /(\$|€|&euro;)/;    var leftWidth = 0, rightWidth = 0;    for(var tableCounter = 0, tables = document.getElementsByTagName("table");        tableCounter < tables.length; tableCounter++) {      if(tables[tableCounter].className.indexOf("fix-align-char") != -1) {        var fCols = [], leftPart, rightPart, parts;        for(var i = 0, cols = tables[tableCounter].getElementsByTagName("col"); i < cols.length; i++) {          if(cols[i].getAttribute("char")) {            fCols[i] = cols[i].getAttribute("char");          }        }        for(var i = 0, trs = tables[tableCounter].rows; i < trs.length; i++) {          for(var j = 0, tds = trs[i].getElementsByTagName("td"); j < tds.length; j++) {            if(fCols[j]) {              if(tds[j].innerHTML.indexOf(fCols[j]) != -1) {                parts = tds[j].innerHTML.split(fCols[j]);                leftPart = parts.slice(0, parts.length -1).join(fCols[j]);                leftPart = leftPart.replace(currencies, "<span class='currency'>$1</span>");                rightPart = fCols[j] + parts.pop();                tds[j].innerHTML = "<span class='left'>" + leftPart + "</span><span class='right'>" + rightPart + "</span>";              } else {                tds[j].innerHTML = tds[j].innerHTML.replace(currencies, "<span class='currency'>$1</span>");                tds[j].innerHTML = "<span class='left'>" + tds[j].innerHTML + "</span>";              }              tds[j].className = "char-align";              var txt = document.createTextNode(tds[j].firstChild.offsetWidth);              if(leftWidth < tds[j].firstChild.offsetWidth) {                leftWidth = tds[j].firstChild.offsetWidth;              }              if(tds[j].childNodes[1]) {                txt = document.createTextNode(tds[j].childNodes[1].offsetWidth);                if(rightWidth < tds[j].childNodes[1].offsetWidth) {                  rightWidth = tds[j].childNodes[1].offsetWidth;                }              }            }          }        }      }    }    // This is ugly and should be improved (amongst other parts of the code ;)    var styleText = "\n" +        "<style type='text/css'>\n" +        "  .fix-align-char td.char-align { width: " + (leftWidth + rightWidth) + "px; }\n" +        "  .fix-align-char span.left { float: left; text-align: right; width: " + leftWidth + "px; }\n" +        "  .fix-align-char span.currency { text-align: left; float: left; }\n" +        "  .fix-align-char span.right { float: right; text-align: left; width: " + rightWidth + "px; }\n" +        "</style>\n";    document.body.innerHTML += styleText;  })();

table {    border-collapse: collapse;    width: 600px;  }  th {    padding: .5em;    background: #eee;    text-align: left;  }  td {    padding: .5em;  }  #only-css td.char-align {    width: 7em;  }  #only-css span.left {    float: left;    width: 4em;    text-align: right;  }  #only-css span.currency {    float: left;    width: 2em;    text-align: left;  }  #only-css span.right {    float: right;    width: 3em;    text-align: left;  }

<table id="only-css">    <thead>      <tr>        <th>Number</th>        <th>Description</th>        <th>Costs</th>      </tr>    </thead>    <tbody>      <tr>        <td>1</td>        <td>Lorem ipsum dolor sit amet</td>        <td class="char-align">          <span class="left">            <span class="currency">$</span>3          </span>          <span class="right">,99</span>        </td>      </tr>      <tr>        <td>2</td>        <td>Consectetuer adipiscing elit</td>        <td class="char-align">          <span class="left">            <span class="currency">$</span>13          </span>          <span class="right">,95</span>        </td>      </tr>      <tr>        <td>3</td>        <td>Pellentesque fringilla nisl ac mi</td>        <td class="char-align">          <span class="left">            <span class="currency">$</span>4          </span>          <span class="right"></span>        </td>      </tr>      <tr>        <td>4</td>        <td>Aenean egestas gravida magna</td>        <td class="char-align">          <span class="left">            <span class="currency">$</span>123          </span>          <span class="right">,999</span>        </td>      </tr>    </tbody>  </table>

Answer 2

Another way to format a number would be like this: 35<span style="visibility: hidden">.000</span>. That is, write it out with the full decimal expansion, but write the trailing decimals in invisible ink. That way you don't have to worry about the width of the decimal point.