9

我正在构建一个 wordpress 插件，它生成一个 HTML 表格并通过简码发送到重力形式 html 块。

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

  • 23.24
  • 1,234.665
  • 123.4

ETC...

注意小数位数的不同。

是否有按小数点对齐此列数据的非黑客和最佳实践方法？在这种情况下，右对齐将不起作用。

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

如您所见，我尝试align="char" char="."在 td 元素中使用，但没有成功。

任何人都可以对此提供帮助的任何帮助将不胜感激。

非常感谢。

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

4

7 回答 7

5

没有直接的方法可以做到这一点。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) 使用Figure SPACE U+2007，定义为与数字等宽（当数字等宽时），例如

123.4&#x2007;&#x2007;

为此，您需要设置字体以使其包含 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 会打乱布局。

（很明显，数字必须具有相等的提前宽度，以便您可以完全对齐数字数据。这只是意味着用于值的字体必须具有该属性。大多数字体在这方面都会这样做，但是例如 Georgia，康斯坦蒂亚，科贝尔不会。）

于 2012-07-22T17:09:49.070 回答
4

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

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

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

它通过添加另一列来做到这一点，但尽最大努力不破坏其他间距。在 Github 页面上还有一个不同解决方案的参考。

于 2013-02-11T23:16:12.950 回答
2

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

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

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

于 2012-07-22T14:31:16.247 回答
0

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

一旦你这样做了，使用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>";
于 2012-07-22T13:55:15.043 回答
0

这可能有点矫枉过正，但我​​需要同样的东西，只是用输出的长度来解决，并根据该长度添加空格。

IE：

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)

只是想在提出自己的解决方案之前查看此页面时提供我的解决方案。

于 2014-06-29T01:37:37.667 回答
0

我已经为此使用了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>";
}
于 2017-10-26T13:37:14.880 回答
0

这是我的解决方案，希望对您有所帮助！！

<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>

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

于 2015-12-02T04:43:59.060 回答