如何有效率地對齊 HTML 表格中的小數點？

在HTML 中對齊小數點：超越基本解決方案

雖然在HTML 表格中對齊小數點的問題可能看起來微不足道，但事實證明對網路開發人員來說具有挑戰性。兩種常見的方法（使用 HTML 元素分割數字或使用 HTML4 colalign="char" 屬性）都有限制。

但是，有一個更優雅、更有效率的解決方案，稱為 Unicode 字元「FIGURE SPACE」 ( )。此空白字元具有與數字相同寬度並保持其間距的獨特屬性。

利用數位空間進行對齊

要左對齊小數點，只需在左側用數字空格填充數字。如需右對齊，請在右側填入數字空格。

<code class="css">/* 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;
}</code>

<code class="html"><div class="left-aligned">
  10000<br>
  &amp;#8199;&amp;#8199;123.4<br>
  &amp;#8199;&amp;#8199;&amp;#8199;&amp;#8199;3.141592
</div>

<div class="right-aligned">
  10000<br>
  &amp;#8199;&amp;#8199;123.4<br>
  &amp;#8199;&amp;#8199;&amp;#8199;&amp;#8199;3.141592
</div></code>

增強的對齊控制

圖形空格透過允許控制提供額外的靈活性超過填充字元的數量。這樣可以建立完美對齊的列或分割區。

所有主要瀏覽器都支援圖形空間，使其成為在 HTML 中對齊小數點的強大且跨平台的解決方案。

以上是如何有效率地對齊 HTML 表格中的小數點？的詳細內容。更多資訊請關注PHP中文網其他相關文章！