HTML での小数点の位置合わせ: 基本的な解決策を超えて

HTML テーブルで小数点を位置合わせするという問題は些細なことのように思えるかもしれませんが、それは証明されています。 Web 開発者にとっては困難です。 HTML 要素を使用して数値を分割するか、HTML4 のcol align="char" 属性を使用する 2 つの一般的なアプローチには制限があります。

ただし、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 で小数点を整列させるための堅牢なクロスプラットフォーム ソリューションになります。