如何使用CSS将表格列中的右对齐数字居中？

Question

下图说明了我正在努力实现的目标:

UPD.如你所见,我需要在其单元格中居中最长的数字,并且所有其他数字要与最长数字的右边界对齐.

UPD 2.数字是动态的(最初未知).

Answer 1

似乎没有任何直接的CSS方法.但您可以在评论中考虑@CMKanode建议的方法.您需要对列中的数字进行预处理并计算其中最大的数字(这需要区分大小写的解析,因为您使用的是千位分隔符),然后您可以使用U将数字左键填充到相同的字符数+2007将SPACE表示为与数字宽度相同的空格.当然,该列将被声明为居中.

因此在示例中,"5"将被填充        5(假设您使用普通空间作为千位分隔符; U + 2009 THIN SPACE可能更好,但它有字体问题.

该方法意味着您需要使用数字具有相同宽度的字体(计算机中的大多数字体)并且包含U + 2007.

例如,如果千位分隔符是逗号或句点,则需要使用U + 2008 PUNCTUATION SPACE.

最后,我认为这会过于复杂.最好使列右对齐,但使用合适的左右填充,根据列标题的宽度和数字的预期宽度选择为一个很好的猜测.

Answer 2

下面不是一个理想的解决方案,因为数字的大小最初是未知的,但如果没有太多额外的标签,它会更接近.

CSS:

.numSpan {
    display: inline-block;
    width: 100px;
    text-align: right;
}
td { text-align: center; }

HTML:

<td>
    <span class="numSpan">5</span>
</td>