发表新帖
发表新帖

Aligning decimal points in HTML

后端 未结
关注
11 1741
渐次进展
渐次进展 2020-11-27 12:52

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 poin

相关标签:
11条回答
  • 予麋鹿
    2020-11-27 13:21

    Thousands of years ago (or 2-3) I wrote a jQuery shim that emulates align="char" which still seems to work. It uses CSS padding and accounts for colspans, so it's moderately clever, but it's really not very pretty code (I was just starting out in javascript back then). I'd love for someone to rewrite it (and take all the credit).

    In the mean time, see if this helps you: https://gist.github.com/inanimatt/f27ffd25c174e9d8a0907455395d147d

    Trivia: The reason that browsers don't properly support column styles is that tables are 2D data structures and the DOM (which is what Javascript and CSS operate on, and how HTML5 is defined) is purely hierarchical and therefore can't represent both columns and rows. Instead it simply defines rows and cells, and doesn't represent columns at all.

    0 讨论(0)
  • 南旧
    2020-11-27 13:21

    If the numbers are monospaced, javascript could be used to adjust the padding on the cell (in ems), depending on the number of digits before the decimal point. Otherwise, it could be tricky.

    0 讨论(0)
  • 既然无缘
    2020-11-27 13:22

    I played around with jQuery & came up with this...

    $(document).ready(function() {
  $('.aBDP').each(function() {
    var wholePart, fractionPart;
    wholePart = Math.floor($(this).text()-0);
    fractionPart = Math.floor(($(this).text() % 1)*10000 + 0.5) / 10000 + "";
    html  = '<span class="left">' + wholePart + '.' + '</span>';
    html += '<span class="right">' + fractionPart.substring(2) + '</span>';
    $(this).html(html); 
  })
})
    .right {
    text-align: left;
}
.left {
    float:left;
    text-align: right;
    width:10em;
}
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript"></script>

<table width="600" border="1">  
  <tr><th></th><th>Aligned Column</th></tr>
  <tr><th>1st Row</th><td class='aBDP'>1.1</td></tr>
  <tr><th>2nd Row</th><td class='aBDP'>10.01</td></tr>  
  <tr><th>3rd Row</th><td class='aBDP'>100.001</td></tr>  
  <tr><th>4th Row</th><td class='aBDP'>1000.0001</td></tr>
</table>

    It seemed to work.

    0 讨论(0)
  • 予麋鹿
    2020-11-27 13:26

    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>

    0 讨论(0)
  • 独厮守ぢ
    2020-11-27 13:27

    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>";
}
    0 讨论(0)
  • 甜味超标
    2020-11-27 13:29

    I love short answers, even though the long ones are important too, so I liked;

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

    and would just like to add;

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

    just to throw php into the mix. Much depends on fixed width fonts, still, but the latter works for me. Since data oft is already tabular, adding another table within a cell is just too much typing and hard to maintain.

    0 讨论(0)
 看不清?
提交回复
热议问题