CSS text-align按小数点对齐表格数值不生效问题咨询

问题原因 #

你用到的text-align: "." center是CSS Text 4规范草案里提出的按指定字符对齐的语法，目前绝大多数主流浏览器都没有实现这个特性，所以代码写了也不会生效，不是你对语法的理解或者用法出了问题。

可用替代方案 #

要实现表格数值按小数点对齐，目前有几个兼容性很好的实现方式：

• 小数位数固定的场景（比如你案例里的金额都是两位小数），直接给对应列设置text-align: right，再给列加合适的右内边距，就能实现小数点对齐的效果，是成本最低的方案
• 小数位数不固定的场景，可以把每个数值的整数部分、小数点、小数部分拆分成3个相邻的无左侧边框单元格，整数部分右对齐，小数部分左对齐，视觉上完全看不出拆分痕迹，对齐效果最精准
• 也可以引入轻量的JS工具计算每个数值中小数点的位置，动态给数值加左侧偏移量实现对齐，适合复杂场景使用

另外你的CSS代码存在大量重复的样式声明，后续相同的样式只需要写一次即可，冗余的声明会被后面的覆盖，还会增加文件体积。

内容的提问来源于stack exchange，提问作者TheLynchyCode