Bagaimanakah Saya Boleh Menjajarkan Titik Perpuluhan dalam Jadual HTML dengan Cekap?

Menjajarkan Titik Perpuluhan dalam HTML: Melangkaui Penyelesaian Elementary

Walaupun persoalan menjajarkan titik perpuluhan dalam jadual HTML mungkin kelihatan remeh, ia telah terbukti mencabar untuk pembangun web. Dua pendekatan biasa, membahagikan nombor menggunakan elemen HTML atau menggunakan atribut HTML4 col align="char", mempunyai had.

Walau bagaimanapun, wujud penyelesaian yang lebih elegan dan cekap dikenali sebagai aksara Unicode 'RUANG RAJAH' ( ). Watak ruang putih ini mempunyai sifat unik iaitu lebar yang sama dengan digit dan mengekalkan jaraknya.

Memanfaatkan Ruang Rajah untuk Penjajaran

Untuk menjajarkan titik perpuluhan ke kiri, hanya nombor pad dengan ruang angka di sebelah kiri. Untuk penjajaran kanan, nombor pad dengan ruang angka di sebelah kanan.

<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>

Kawalan Penjajaran Dipertingkat

Ruang angka memberikan fleksibiliti tambahan dengan membenarkan kawalan melebihi bilangan aksara padding. Ini membolehkan penciptaan lajur atau bahagian yang dijajar dengan sempurna.

Ruang angka disokong oleh semua penyemak imbas utama, menjadikannya penyelesaian yang mantap dan merentas platform untuk menjajarkan titik perpuluhan dalam HTML.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menjajarkan Titik Perpuluhan dalam Jadual HTML dengan Cekap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!