在HTML中alignment小数点
我有一个表中包含一列中的十进制数字。 我正在寻找以类似于文字处理器的“小数点标签”function的方式alignment它们，以便所有点坐在垂直线上。
我目前有两种可能的解决scheme，但我希望有更好的方法。
解决scheme1：在HTML中拆分数字，例如
<td><div>1234</div><div class='dp'>.5</div></td> 同
.dp { width: 3em; }
（是的，这个解决scheme并不完全正常，但是这个概念是有效的。）
解决scheme2：我发现提到
<col align="char" char=".">
这是根据参考页面的HTML4的一部分，但它不适用于FF3.5，Safari 4或IE7，这是我必须手头的浏览器。 它也有问题，你不能拉出数字格式到CSS（虽然，因为它正在影响整个列，我想这不是太令人吃惊）。
因此，任何人有更好的主意？
请参阅Krijn Hoetmer的文章以了解您的select以及如何实现此目的。 这个解决scheme的本质是使用CSS和JS来实现这一点：
(function() { var currencies = /(\$|€|€)/; 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>
作弊; 这个解决scheme的好处：也适用于比例字体。 有一个额外的列和拆分小数点分隔符和小数的整数部分。 然后使用这个CSS：
table{border-collapse:collapse;} td{padding:0px;margin:0px;border:0px;} td+td{text-align:right;} td,td+td+td{text-align:left;}
在标题行中组合两列：
<table> <tr><th>Name</th><th colspan=2>Height</th></tr> <tr><td>eiffeltower</td> <td>324</td> <td></td></tr> <tr><td>giraffe</td> <td>5</td> <td>,30</td></tr> <tr><td>deer</td> <td>1</td> <td></td></tr> <tr><td>mouse</td> <td>0</td> <td>,03</td></tr> </table>
我玩jquery和想出了这个…
HTML
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>
JavaScript的
$(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); }) })
CSS
.right { text-align: left; } .left { float:left; text-align: right; width:10em; }
它似乎工作
格式化数字的另一种方法是这样的： 35<span style="color:transparent">.000</span> 。 也就是说，用十进制的全部扩展写出来，但是将后面的小数写入不可见的墨水中。 这样你就不必担心小数点的宽度。
你可以打印数字，以便他们总是有相同的小数位数，并alignment它们？
我喜欢短的答案，即使长的也很重要，所以我喜欢;
35<span style="color:transparent">.000</span>
只想补充一下;
<TD><div style='float:right;'><?php echo number_format($totalAmount,2); ?></div></TD>
只是把PHPjoin混合。 很大程度上取决于固定宽度的字体，但后者适用于我。 由于数据已经是表格，因此在单元格中添加另一个表格太多了，而且很难维护。
成千上万年前（或2-3）我写了一个模仿align =“char”的jQuery shim，它似乎仍然有效。 它使用CSS填充和帐户colspans，所以它适度聪明，但它不是非常漂亮的代码（我刚刚开始在JavaScript的时候）。 我很想有人重写它（并获得所有的荣誉）。
同时，看看这是否有助于你： https : //gist.github.com/inanimatt/f27ffd25c174e9d8a0907455395d147d
琐事：浏览器没有正确支持列样式的原因是表格是2D数据结构，DOM（Javascript和CSS操作的是什么，以及HTML5是如何定义的）是纯粹的层次结构，因此不能同时代表两列和行。 相反，它只是定义行和单元格，并不代表列。
如果数字是等宽的，javascript可以用来调整单元格中的填充（以ems为单位），具体取决于小数点之前的位数。 否则，这可能会很棘手。
Krijn Hoetmer所做的function干扰prettyPhoto，所以我做了一个jQuery版本。 货币部分被删除，因为它应该是dynamic的，而不是根据预定义的货币replacestring。
需要的是来自phpjs的空函数： http ://phpjs.org/functions/empty:392。
使用的jQuery是1.6版本。
/* This function will align table columns on the char if in the col from the * colgroup has the property 'align="char"' and a attribute 'char'. The alignment * is done on the first occurence of the specified char. * * The function is inspired from: * * http://krijnhoetmer.nl/stuff/javascript/table-align-char/ * http://stackoverflow.com/questions/1363239/aligning-decimal-points-in-html */ function alignNumbers() { var table; /* This will store the table currently working on . */ var i = 0; /* Every column can have it's own width, the counter makes the class name unique. */ /* Get all tables for which the alignment fix must be done. * * Note: this could even be further optimized by just looking for tables where * there is aa col with 'align="char"'. */ $('table.fix-align-char').each(function(index) { table = $(this); /* All table columns are fetched to have a correct index, without it it's * hard to get the correct table cells. */ $(this).find('col').each(function(index) { /* Only those table cells are changed for which the alignment is set to * char and a char is given. */ if ($(this).prop('align') == 'char' && !empty($(this).attr('char'))) { /* Variables for storing the width for the left and right part (in pixels). */ var left_width = 0, right_width = 0; var col, left_part, right_part, parts, new_html; i++; /* Increase the counter since we are working on a new column. */ col = $(this); /* For the col index + 1 (nth-child starts counting at 1), find the table * cells in the current table. */ table.find('> tbody > tr > td:nth-child('+ (index + 1) +')').each(function(index) { /* Split the html on the specified char. */ parts = $(this).html().split(col.attr('char')); new_html = ''; /* The first element is always the left part. The remaining part(s) are * the right part. Should there be more chars in the string, the right * parts are rejoined again with the specified char. */ left_part = parts.shift(); right_part = parts.join(','); /* Add a left part to the new html if the left part isn't empty*/ if (!empty(left_part)) { new_html = new_html + '<span class="left">' + left_part + '</span>'; } /* Add the specified char and the right part to the new html if * the right part isn't empty*/ if (!empty(right_part)) { new_html = new_html + col.attr('char') + '<span class="right">' + right_part + '</span>'; } /* If there is a new html, the width must be determined and a class is * added. * * Note: outerWidth is used instead of width so padding, margin and * borders are taken into account. */ if (!empty(new_html)) { $(this).html(new_html); /* Set the new html. */ $(this).addClass('char-align-' + i); /* Add a class to the table cell. */ /* Get the left span to determine its outer width. */ leftSpan = $(this).children('.left'); if (!empty(leftSpan) && left_width < leftSpan.outerWidth()) { left_width = leftSpan.outerWidth(); } /* Get the right span to determine its outer width. */ rightSpan = $(this).children('.right'); if (!empty(rightSpan) && right_width < rightSpan.outerWidth()) { right_width = rightSpan.outerWidth(); } } }); /* Only if any width is larger then 0, add a style. */ if (left_width > 0 || right_width > 0) { style_text = '<style type="text/css">.fix-align-char td.char-align-' + (i) + ' span.left { float: left; text-align: right; width: ' + (left_width) + 'px; }\n.fix-align-char td.char-align-' + (i) + ' span.right { float: right; text-align: left; width: ' + right_width + 'px; }</style>'; $('head').append(style_text); } } }); }); } $(document).ready(function(){ alignNumbers(); });
我用JavaScript来解决这个问题…这是我的HTML。
<body> <table id="nadis"> </tr> </table> </body>
这是我的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+ '  '; } numarray[j] = finalhigh + numarray[j]; } var nadiss = document.getElementById("nadis"); nadiss.innerHTML += "<tr><td>" + numarray[j] + "</td></tr>"; }
