Align Decimal Data in table column by decimal point, HTML5, CSS3

user_1239122 0
Viewed 8456

I am building a wordpress plugin which is generating an HTML table and sending to gravityforms html block via shortcode.

My problem is that cell contents can contain:

  • 23.24
  • 1,234.665
  • 123.4

etc...

Notice the differing number of decimal places.

Is there a non-hack & best practice way of aligning this column data by decimal point? In this case, Aligning right will not work.

Inserting 0s is not acceptable because this indicates a degree of accuracy which is not there.

As you can see, I have attempted to use align="char" char="." inside the td elements with no luck.

Any help anybody can help with this would be much appreciated.

Many thanks.

Is there a way of using printf("%8.3f",d1) or similar without actually printing to the screen? e.g. structuring the variable d1 for later use but not actually printing it?

text-alignment decimal-point css html php
7 Answers

I have used javascript for this, I hope this will help....... 

</tr>
</table>

</body>
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
Related