将小数点中的十进制数据与小数点对齐，HTML5，CSS3

Question

我正在构建一个wordpress插件，它正在生成一个HTML表格并通过简码发送给gravityforms html块。

我的问题是单元格内容可以包含：

• 23.24
• 1,234.665
• 123.4

等等

通知的不同的小数位数。

是否有非破解&最佳实践对齐此列数据的方法是按小数点吗？在这种情况下，对齐权不起作用。

插入0是不可接受的，因为这表示不存在准确度。

正如您所看到的，我试图在td元素内使用align="char" char="."，但没有运气。

任何人都可以帮助这个任何帮助将不胜感激。

非常感谢。

有没有使用printf("%8.3f",d1)或类似的方法，而没有实际打印到屏幕上？例如构造变量d1供以后使用，但实际上不打印它？

Answer 1

事情是，你必须确保它们在小数点后有相同的位数。

一旦你这样做，使用text-align。它只需要一个：style='text-align: right'

更好的是，您可以使用css类而不是内联样式。您的标记应该是这样的：

<tr><td>Item 1</td><td>15</td><td class='price'>&pound;123.25</td></tr> 

然后在你的样式表：

td.price{ 
    text-align: right; 
} 

，使用PHP，你可以格式化数与number_format字符串。您不必回显或打印它，只需将您的变量包含在该函数中即可。例如：

$table .= "<td class='price'>&pound;" . $price . "</td></tr>"; 

变为：

$table .= "<td class='price'>&pound;" . number_format($price,3) . "</td></tr>"; 

Answer 2

难道可以接受把价值为列？

使用sprintf()将该值转换为一个字符串，然后将这些位置于左列（但右对齐）中的小数点位置，并将第二列中的小数位置位。

请参阅http://jsfiddle.net/alnitak/p4BhB/，但忽略JS位...

Answer 3

没有直接的方法来做到这一点。 HTML 4.01有align=char，但没有任何浏览器支持。 CSS 2.0有一个对应的，使用text-align属性，同样缺乏支持，所以它从CSS 2.1中删除。 CSS3草案对于这种对齐有一个很好的系统，但是如果没有（正确的）实现，则表示有被从规范中删除的危险。

作为一种解决方法，您可以使用某些不可见的（空白）右键填充值，以便当值对齐到右侧时，小数点标记会对齐。有几种方法可以实现这一点：

1）使用数字0，但在其上设置样式，使其不可见，例如，

123.4<span class=s>00</span> 

与

.s { visibility: hidden; } 

2）使用图SPACE U + 2007，定义为具有相同的宽度的数字（当位为宽度相等），例如

123.4   

对于这个工作，你需要设置字体，以便它包含U + 2007。据http://www.fileformat.info/info/unicode/char/2007/fontsupport.htm甚至Arial包含它，但我恐怕这可能不适用于仍在使用的旧版本的Arial。

3）使用ch单位（定义为具有数字0的宽度），使用一个不间断空格并将其宽度设置为所需的位数，但该单位相对较新并且不受旧浏览器支持。例如：

123.4<span class=d2>&nbsp;</span> 

与

.d2 { width: 2ch; display: inline-block; } 

我可能会用第一种方法。原则上，它的缺点是，当CSS关闭时，数据包含零，这意味着关于准确性的错误信息，而在其他方法中，仅将“关闭”CSS切换布局。 （这可能很明显，数字的宽度必须相等，这样你才可以对齐数字数据，这意味着用于该值的字体必须具有该属性，大多数字体都会在这方面做，但如格鲁吉亚，康斯坦提亚和康贝尔不会）。

Answer 4

我写了一个jQuery插件来解决这个问题。它在这里找到：https://github.com/ndp/align-column

使用您原始的HTML表格，它会用小数点对齐列：

$('table').alignColumn(3);

它通过添加另一列，但会尽力不损坏其他间距。在Github页面上还有一个对不同解决方案的引用。

Answer 5

它可能是矫枉过正的，但我需要同样的东西，只是解决了输出的长度和基于该长度添加空白。

I.e.：

if (strlen($meal_retail) == 5) { 
echo "    "; 
} 
else (strlen($meal_retail) == 6) { 
    echo "  "; 
} 

这一字排开我小数正确地一些额外的做，我敢肯定的阵列可以清理上面的代码了，甚至更好。

此外，我一直符合我的号码与调整：

echo money_format('%i',$meal_retail) (makes it a two decimal money number) 

只是想提供我的解决方案，因为我是想出我自己的解决方案之前，在看这个页面。

Answer 6

这是我的解决方案，希望它有帮助！

<style type="text/css"> 
td{ 
    font-family: arial; 
} 
.f{ 
    width: 10px; 
    color: white; 
    -moz-user-select: none; 
} 
</style> 

<table> 
<tr><td><span class="f">00</span>1.1<span class="f">00</span></td></tr> 
<tr><td><span class="f">0</span>12.34<span class="f">0</span></td></tr> 
<tr><td>123.456</td></tr> 
</table> 

有了这个，你看不到零并且不能选择它们！

Answer 7

我已经使用的JavaScript对于这一点，我希望这将有助于.......

</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>"; 
}