在HTML中对齐小数点

请参阅Krijn Hoetmer的这篇文章，了解您的选择以及如何实现这一点。该解决方案的实质是使用CSS和JS实现此目的：

(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 >$1</span>");   rightPart = fCols[j] + parts.pop();   tds[j].innerHTML = "<span >" + leftPart + "</span><span >" + rightPart + "</span>"; } else {   tds[j].innerHTML = tds[j].innerHTML.replace(currencies, "<span >$1</span>");   tds[j].innerHTML = "<span >" + 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 pre ;)  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 >        <span >          <span >$</span>3        </span>        <span >,99</span>      </td>    </tr>    <tr>      <td>2</td>      <td>Consectetuer adipiscing elit</td>      <td >        <span >          <span >$</span>13        </span>        <span >,95</span>      </td>    </tr>    <tr>      <td>3</td>      <td>Pellentesque fringilla nisl ac mi</td>      <td >        <span >          <span >$</span>4        </span>        <span ></span>      </td>    </tr>    <tr>      <td>4</td>      <td>Aenean egestas gravida magna</td>      <td >        <span >          <span >$</span>123        </span>        <span >,999</span>      </td>    </tr>  </tbody></table>