Richten Sie die Dezimalstellen der Zahlen in der Tabelle so aus, dass in den Zellen eine pseudozentrierte Ausrichtung erscheint

Question

Ich möchte eine Tabelle mit einer Spalte mit Dezimalzahlen mit unterschiedlichen Längen vor und nach dem Dezimalpunkt und einer Ausrichtung aller Dezimalpunkte.

Spaltenbreiten müssen eine „fließende“ Größe haben und bei Bedarf erweitert werden, um sehr lange Zahlen in allen Datenzellen oder sehr lange mit der Spalte verknüpfte Überschriften aufzunehmen.

Zellen, die Ganzzahlen (ohne Dezimalpunkte) enthalten, sollten weiterhin Zahlen anzeigen, wobei die Zahlen an derselben Position ausgerichtet sind, als ob das Dezimalzeichen vorhanden wäre. (Zum Beispiel sollte die Zahl 512 immer noch korrekt mit einer Zelle übereinstimmen, die nur „512“ statt „512“ enthält.)

Schriftart sollte irrelevant sein; Monospaced sollte nicht erforderlich sein.

Abschließend müssen die Zahlen auch so weit wie möglich in der Spalte zentriert sein, während die Dezimalpunkte (sichtbar und implizit!) ausgerichtet bleiben. Insbesondere muss die Breite des „linken Leerraums“ der Zelle mit den meisten Zeichen vor dem Dezimalzeichen (oder einfach der Mehrheit der Zeichen, wenn kein Dezimalzeichen vorhanden ist) gleich der Breite des „rechten Leerraums“ von sein die Zelle Die Breite ist gleich. Die Zelle mit den meisten Zeichen nach dem ersten Dezimalzeichen.

Für die letzte Anforderung habe ich ausdrücklich „Zeichen“ anstelle von „Zahlen“ gesagt, da das Tabellenlayout symbolische Zeichen wie Plus-/Minuszeichen vor Zahlen und Buchstaben wie Abkürzungen für Maßeinheiten, die nach Zahlen angehängt werden, verarbeiten sollte.

Die HTML 4.01-Spezifikation „per Definition“ ermöglicht die einfache Erstellung solcher Layouts mithilfe einfacher HTML-Tabellen. (Teilen Sie die Daten nach Dezimalzeichen in die beiden inneren Zellen einer 4-Spalten-Spaltengruppe mit den äußeren beiden Spalten auf width="*" 和内部两个 col width="0*"。右对齐包含数字整数部分的单元格，并将包含数字小数部分和小数部分的单元格左对齐。将这两个单元格设置为 nowrap，然后设置表格的 cellpadding="0" cellspacing =“0”规则=“组”.)

Aber viele Leute sagen, das sei schlecht und sollte mit CSS statt mit Tabellen formatiert werden. Ich habe auch gelernt, dass eine Tabelle mit semantisch korrekten Daten diese Zahlen in einer einzigen Zelle beibehalten sollte. Aber ich habe keine CSS-Möglichkeit gefunden, die gewünschte Formatierung zu erreichen!

Nur wenn Sie die Textausrichtung einer einzelnen Spalte auf „Zentriert“ festlegen, bleiben die Dezimalpunkte nicht ausgerichtet.

Wenn ich mich nicht irre, funktioniert die Verwendung von align="char" nicht mit ganzen Zahlen, die keinen expliziten Dezimalpunkt haben, aber dennoch so ausgerichtet werden müssen, als ob sie einen Dezimalpunkt hätten.

Das Anhängen des Dezimalzeichens an eine ganze Zahl, selbst wenn Sie es verbergen, beeinträchtigt technisch gesehen die Datenintegrität.

Das Auffüllen von Daten mit geschützten Leerzeichen funktioniert nicht mit proportionalen (nicht monospaced) Schriftarten. Diese Art von Hackerangriff kann auch die Datenintegrität gefährden.

Durch die Angabe der Position über einen festen Pixelversatz kann die Spalte keine echte „flüssige“ Breite haben und wird nach Bedarf gerendert, um den Inhalt aller Zellen in der Spalte anzupassen, einschließlich der Kopfzellen, die jederzeit Daten beliebiger Länge enthalten können .

JavaScript liest nach dem Rendern die endgültige Breite der Tabelle, berechnet dann dynamisch den Pixelversatz und „schiebt“ dann die Datenausrichtung durch das DOM-Rewrite-Format, was langsam ist und visuelles Rauschen erzeugt, wenn die Daten hin und her springen. Das ist ein geradezu schmutziger Hack, sogar noch schmutziger als die Verwendung von Tabellen für das Layout!

Meiner Meinung nach kann der „puristische“ CSS-Layout + semantische HTML-Datenansatz dieses einfache, aber oft benötigte Layout nicht erreichen! Ich hoffe, dass mir jemand das Gegenteil beweisen und mir zeigen kann, wie man dieses Layout „richtig“ macht.

Answer 1

有一个纯 html/css 解决方案，但它并不漂亮。您需要将小数对齐列分成两列，它们之间没有填充。第一列具有整数值且右对齐，第二列具有小数和小数值。

customers	balance
John	4	.45
Jane	20
Jim	2,300	.64

您还可以使用“.integer”和“.decimal”等类，而不是 :nth-child 选择器。这会更稳健，但我试图保持标记简短。