Angleichung der Dezimalpunkt von zahlen in einer Tabelle, mit dem erscheinen der pseudo-"Zentrum" Ausrichtung in der Zelle

Möchte ich eine Tabelle mit einer Spalte mit dezimal-zahlen, von unterschiedlicher Länge vor und nach dem Komma, mit dem Nachkommastellen alle ausgerichtet.

Die Breite der Spalte muss eine "Flüssigkeit" Größe, ausbau wie nötig, um Platz für ENTWEDER eine sehr lange Zahl in JEDER der Datenzellen, ODER eine sehr lange HEADER für die jeweiligen Spalten.

Zellen mit ganzen zahlen (ohne Dezimalzeichen) sollten zeigen noch die zahlen mit den zahlen ausgerichtet, die in der gleichen position wie wenn ein Dezimaltrennzeichen vorhanden war. (zB. Die Zahl 512 sollten noch die Ziffern korrekt ausgerichtet mit der Zelle, die nur "512" anstelle von "512.")

Die Schrift sollte irrelevant sein; monospaced sollte nicht vorgeschrieben werden.

Endlich, die zahlen müssen auch zentriert in der Spalte so gut wie möglich, während die Dezimalstellen (sichtbar und stillschweigend!) ausgerichtet.
Insbesondere der "linken Seite leere Lücke" der Zelle, mit der die meisten Zeichen, die vor dem Dezimalzeichen (, oder einfach die meisten Zeichen, wenn es kein Dezimaltrennzeichen vorhanden) muss die gleiche Breite wie die "right-side-leere Lücke" der Zelle, mit der die meisten Zeichen nach dem ersten dezimal-Trennzeichen.

Ich ausdrücklich sagen - "Zeichen" statt von "Ziffern" für die Letzte Anforderung, da das table-layout behandeln soll, die symbolische Zeichen, wie positiv - /negativ-Zeichen voranstellen der Ziffern und Buchstaben wie Maßeinheit Abkürzungen Anhängen der Ziffern.

Die HTML 4.01-Spezifikation "durch das Buch", es erlaubt, ein layout zu sehr einfach durchgeführt werden mit einem einfachen HTML-Tabelle. (Teilen Sie die Daten auf Ihrer dezimal-Zeichen auf der zwei innere Zellen einer 4-Spalte colgroup, mit den beiden äußeren col width="*" - und innen zwei col width="0*". Rechts-richten Sie die Zelle mit dem integer-Teil der Reihe, und Links-richten Sie die Zelle mit dem dezimal-Trennzeichen und Bruch-Teil der Zahl. Sowohl jene Zellen zu nowrap, dann legen Sie die Tabelle cellpadding="0" cellspacing="0" rules="groups".)

Aber einige Leute sagen das ist schlecht, und das CSS verwendet werden sollte anstelle von Tabellen für die Formatierung Zwecke. Ich verstehe auch, dass eine Tabelle mit semantisch korrekten Daten zu halten, sollten diese Nummern unverändert in einer einzigen Zelle. Aber ich habe nicht gefunden, alle CSS-Methode von acheiving Sie die gewünschte Formatierung!

Einfach die Einstellung eines einzelnen Spalte die Textausrichtung auf "zentriert" nicht halten Sie die Dezimalstellen ausgerichtet.

Wenn ich nicht Irre, mit align="char" nicht umgehen kann, ganze zahlen, die nicht über eine ausdrückliche dezimal-Punkt, müssen aber noch ausgerichtet werden, als wenn Sie es Taten.

Anhängen dezimal-Zeichen in ganze zahlen, selbst wenn Sie ausblenden, technisch bricht die Integrität der Daten.

Polsterung der Daten mit non-breaking-spaces funktioniert nicht mit proportional (nicht-monospaced) fonts. Und dieser hack zu brechen würde die Integrität der Daten.

Angabe der position durch Feste pixel-offsets nicht zuzulassen, dass die Spalte, um eine wirklich "flüssige" Breite, gerendert, wenn notwendig, passen Sie den Inhalt aller Zellen in der Spalte, einschließlich der header-Zelle, die könnte Daten enthalten, die von beliebiger Länge ist jederzeit möglich.

JavaScript liest die resultierende Breite der Tabelle, nachdem es gerendert wurde, dann berechnet dynamisch pixel-offsets, und dann schreibt die Formatierung über DOM - "schieben" Sie die Daten in Ausrichtung zu langsam ist, und optisch stören, da die Daten springt herum. Und es ist ein geradezu schmutziger hack, das ist ja noch dreckiger als die Verwendung von Tabellen für layout-Zwecke!

Fast scheint es mir wie die "puristisches" CSS-layout + HTML-semantic-data-Ansatz ist nicht fähig, diese einfache, aber oft gewünschte layout!
Ich hoffe jemand kann bitte beweisen mich nicht falsch und zeigen mir, wie das layout "richtig".

  • Sie sollten zuerst versuchen und zu finden, wie zum ausrichten von zahlen am Dezimalpunkt (mit align=char funktioniert nicht in der Realität), siehe z.B. stackoverflow.com/questions/11600838/...
  • Jede Lösung, die auf dieser Seite entweder die "Bestechung" der Daten (zB. durch hinzufügen von überflüssigen Nullen oder Leerzeichen) oder durch einfügen eines Zeichen-Abstand-span (beide Grenzen setzen die Schriftarten, die verwendet werden können), oder die Aufteilung der Daten in zwei Zellen (gleiche wie das, was mein "semantisch falsch," HTML 4.01-Tisch-Lösung ist). Und KEINE dieser Lösungen das Problem der "best-Versuch zentrieren" werden die Daten innerhalb der visual-Spalte.
  • Ich schrieb dieses jQuery-plugin, um das problem zu lösen. Es nicht erfordern Nachbearbeitung der Daten. github.com/ndp/align-column
InformationsquelleAutor user1645764 | 2012-09-04
Schreibe einen Kommentar