在 HTML 中对齐小数点：超越基本解决方案

虽然在 HTML 表格中对齐小数点的问题看似微不足道，但事实证明对网络开发人员来说具有挑战性。两种常见的方法（使用 HTML 元素分割数字或使用 HTML4 colalign="char" 属性）都有局限性。

但是，存在一种更优雅、更高效的解决方案，称为 Unicode 字符“FIGURE SPACE” ( )。该空白字符具有与数字相同宽度并保持其间距的独特属性。

利用数字空间进行对齐

要左对齐小数点，只需简单地在左侧用数字空格填充数字。如需右对齐，请在数字右侧填充数字空格。

/* Left-align decimal points */
.left-aligned {
  text-align: left;
  padding-right: .5rem;
  font-family: sans-serif;
}

/* Right-align decimal points */
.right-aligned {
  text-align: right;
  padding-left: .5rem;
  font-family: sans-serif;
}

  10000

    123.4

      3.141592



  10000

    123.4

      3.141592

增强的对齐控制

图形空间通过允许控制填充字符的数量提供了额外的灵活性。这样可以创建完美对齐的列或分区。

所有主要浏览器都支持数字空间，使其成为在 HTML 中对齐小数点的强大且跨平台的解决方案。