在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 中對齊小數點的強大且跨平台的解決方案。