Question

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

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

23.24
1,234.665
123.4

等...

请注意不同的小数位数。

是否有非黑客＆amp;最佳实践通过小数点对齐此列数据的方法？在这种情况下，对齐权将不起作用。

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

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

任何人都可以提供帮助，我们将不胜感激。

非常感谢。

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

Answer 1

没有直接的方法可以做到这一点。 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&#x2007;&#x2007;

要使其正常工作，您需要设置字体以使其包含U + 2007。根据{{3}}，即使Arial包含它，但我担心这可能不适用于仍在使用的旧版Arial。

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

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

与

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

我可能会使用第一种方法。原则上，它有一个缺点，当CSS关闭时，数据包含零，这意味着关于准确性的错误信息，而在其他方法中，关闭“仅”关闭混乱布局。

（很明显，数字必须具有相等的提前宽度，这样你才能对齐数字数据。这只是意味着用于值的字体必须具有该属性。大多数字体都会在这方面做，但是例如Georgia，Constantia和Corbel不会。）

Answer 2

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

使用原始HTML表格，它将按小数点对齐一列：

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

它通过添加另一列来完成此操作，但最好不要破坏其他列。在Github页面上还有对不同解决方案的引用。

Answer 3

将值放入两个列是否可以接受？

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

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

Answer 4

问题是，您必须确保它们在小数点后的位数都相同。

完成后，请使用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 5

它可能有点矫枉过正，但我需要相同的东西，只需解决一段输出并根据该长度添加空格。

I.e。：

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

这正确排列了我的小数，并且做了一些额外的操作，我确信数组可以更好地清理上面的代码。

此外，我一直在调整我的数字：

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

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

7 个答案: