Jajarkan titik perpuluhan nombor dalam jadual dengan penjajaran "tengah" pseudo yang muncul dalam sel

Question

Saya mahukan jadual dengan lajur nombor perpuluhan, dengan panjang berbeza sebelum dan selepas titik perpuluhan, dan dengan titik perpuluhan semuanya sejajar.

Lebar lajur mestilah bersaiz "mengalir" dan mengembang mengikut keperluan untuk menampung nombor yang sangat panjang dalam mana-mana sel data atau pengepala sangat panjang yang dikaitkan dengan lajur.

Sel yang mengandungi integer (tanpa titik perpuluhan) harus tetap memaparkan nombor, dengan nombor dijajarkan dalam kedudukan yang sama seolah-olah aksara perpuluhan hadir. (Sebagai contoh, nombor 512 masih harus diselaraskan dengan betul dengan sel yang hanya mengandungi "512" dan bukannya "512".)

Fon sepatutnya tidak relevan;

Akhir sekali, nombor juga mesti dipusatkan dalam lajur sebanyak mungkin sambil memastikan titik perpuluhan (kelihatan dan tersirat!) sejajar. Khususnya, lebar "ruang putih kiri" sel dengan aksara paling banyak sebelum aksara perpuluhan (atau hanya majoriti aksara jika tiada aksara perpuluhan hadir) mestilah sama dengan lebar "ruang putih kanan" sel Lebar adalah sama. Sel dengan aksara terbanyak selepas aksara perpuluhan pertama.

Untuk keperluan terakhir, saya secara khusus menyebut "aksara" dan bukannya "nombor" kerana reka letak jadual harus mengendalikan aksara simbolik seperti tanda tambah/tolak di hadapan nombor dan huruf seperti singkatan unit ukuran dilampirkan selepas nombor.

Spesifikasi HTML 4.01 "mengikut takrifan" membolehkan susun atur sedemikian mudah dicapai menggunakan jadual HTML ringkas. (Pisah data dengan aksara perpuluhan ke dalam dua sel dalaman bagi kumpulan kol 4 lajur dengan dua kol luar width="*" 和内部两个 col width="0*"。右对齐包含数字整数部分的单元格，并将包含数字小数部分和小数部分的单元格左对齐。将这两个单元格设置为 nowrap，然后设置表格的 cellpadding="0" cellspacing =“0”规则=“组”.)

Tetapi ramai orang mengatakan ini tidak baik dan harus diformat menggunakan CSS dan bukannya jadual. Saya juga mengetahui bahawa jadual dengan data yang betul dari segi semantik harus memastikan nombor ini utuh dalam satu sel. Tetapi saya tidak menemui sebarang cara CSS untuk mencapai pemformatan yang diingini!

Hanya menetapkan penjajaran teks satu lajur kepada "Berpusat" tidak memastikan titik perpuluhan dijajarkan.

Melainkan saya tersilap, menggunakan align="char" tidak berfungsi dengan integer yang tidak mempunyai titik perpuluhan yang jelas, tetapi masih perlu dijajarkan seolah-olah mereka mempunyai titik perpuluhan.

Menambahkan aksara perpuluhan pada integer, walaupun anda menyembunyikannya, secara teknikalnya memecahkan integriti data.

Melapik data dengan ruang yang tidak pecah tidak berfungsi dengan fon berkadar (bukan monospace). Serangan penggodaman jenis ini juga boleh menjejaskan integriti data.

Menentukan kedudukan melalui offset piksel tetap tidak membenarkan lajur mempunyai lebar "cecair" sebenar, memaparkan seperti yang diperlukan untuk memuatkan kandungan semua sel dalam lajur, termasuk sel pengepala, yang boleh mengandungi data pada sebarang panjang pada bila-bila masa .

JavaScript membaca lebar akhir jadual selepas pemaparan, kemudian mengira secara dinamik mengimbangi piksel, dan kemudian "meluncurkan" penjajaran data melalui format penulisan semula DOM, yang perlahan dan mencipta hingar visual apabila data melompat-lompat. Ini adalah penggodaman yang benar-benar kotor, malah lebih kotor daripada menggunakan jadual untuk susun atur!

Pada pendapat saya, reka letak CSS "tulen" + pendekatan data semantik HTML tidak dapat mencapai reka letak yang mudah tetapi sering diperlukan ini! Saya berharap seseorang boleh membuktikan saya salah dan menunjukkan kepada saya cara melakukan reka letak ini "dengan betul".

Answer 1

Ada penyelesaian html/css tulen, tetapi ia tidak cantik. Anda perlu membahagi lajur penjajaran perpuluhan kepada dua lajur tanpa padding di antaranya. Lajur pertama mempunyai nilai integer dan dibenarkan betul, lajur kedua mempunyai nilai perpuluhan dan pecahan.

 

  
customers
  
balance
 
 

  
John
  
4
.45
  
Jane
  
20

  
Jim
   
2,300
.64
 

Anda juga boleh menggunakan kelas seperti ".integer" dan ".decimal" dan bukannya pemilih :nth-child. Ini akan menjadi lebih teguh, tetapi saya cuba untuk memastikan markup pendek.