html – 如何使用CSS在表格列中居中右对齐的数字?

下图显示了我要完成的任务:

UPD.如你所见,我需要最长的数字在其单元格中心,所有其他数字对齐到最长的数字的右边框.

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

解决方法

似乎没有任何直接的CSS方法.但是,您可以考虑@CMKanode在评论中提出的方法.您需要对列中的数字进行预处理并计算其中最大的数字(由于您使用的是千位分隔符,因此需要使用区域设置敏感的解析),然后将数字保留到相同数量的字符,使用U图形空间作为与数字宽度相同的空格.而且,当然这个列将被声明为中心.

因此,在该示例中,将“5”填充到      5(假设你使用正常的空间作为千位分隔符; U 2009 THIN SPACE可能会更好,但它有字体问题.

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

例如,如果数千分隔符是逗号或一段时间,则需要使用U 2008 PUNCTUATION SPACE.

最后,我觉得这太复杂了.可能最好使列对齐,但使用适当的左和右填充,根据列标题的宽度和数字的预期宽度选择作为一个好的猜测.

相关文章

vue阻止冒泡事件 阻止点击事件的执行 <div @click=&a...
尝试过使用网友说的API接口获取 找到的都是失效了 暂时就使用...
后台我拿的数据是这样的格式: [ {id:1 , parentId: 0, name:...
JAVA下载文件防重复点击,防止多次下载请求,Cookie方式快速简...
Mip是什么意思以及作用有哪些