Word-Wrapping einer langen Tabellenzelle bei Beibehaltung der dynamischen Breite in anderen

Question

Ich habe eine Tabelle mit einer langen Zeile in einer ihrer Zellen. Ich brauche die lange Trennlinie, damit der Tisch nicht mehr als 100% breit ist. Ich fand, dass durch Hinzufügen von table-layout: fixed und word-wrap: word-break, wird es die lange Zelle wickeln. Ein Nebeneffekt der Verwendung von table-layout ist jedoch, dass alle Spalten die gleiche Breite haben.

Sie können ein Beispiel, das hier sehen:

http://jsfiddle.net/RYdLd/2/

Wie kann ich die erste Spaltenbreite Auto Größe machen nur ihren Inhalt zu passen? (dh in diesem Beispiel sollte es gerade breit genug sein, um die 1 und 2 in dieser Spalte zu zeigen.)

Die Daten in der Tabelle werden dynamisch geladen, so dass eine Lösung, die Breitenwerte hart codiert, nicht gut ist, weil es keine Möglichkeit, im Voraus zu wissen, wie breit eine Säule sein sollte. Meine einzige Option ist die Verwendung eines <table>, ich kann kein <div> oder ein anderes Element verwenden.

Answer 1

Nach dem official specification, wenn Sie eine feste table-layout verwenden, die Spaltenbreiten der ersten Reihe bestimmen die Spaltenbreiten der gesamten Tabelle. Wenn keine davon definiert ist, werden die Spaltenbreiten gleichmäßig verteilt.

Da scheint es keine andere Option, landete ich mit dem folgenden Verfahren auf:

1. die Daten in der Tabelle Laden während der table-layout auf Auto eingestellt ist.
2. Lesen der Breite der Spalten möchte ich dynamisch sein.
3. Setzen Sie diese Spaltenbreiten auf ihre aktuellen Werte.
4. Ändern der table-layout zu behoben.

Hier ist ein Beispiel, das nicht perfekt ist (die Breite von einem Bit verringert wird):

http://jsfiddle.net/RYdLd/7/

Answer 2

Sie können verwenden: Word-Wrap CSS-Stil, um die langen Sätze zu brechen.

word-wrap: break-word 

Answer 3

ich dies während Ringe mit dem gleichen Problem entdeckt:

Rahmen Pause -word für ein Element entspricht genau dem Einfügen eines Leerraums von null Breite zwischen jedem Zeichen des Textes, der in diesem Element enthalten ist.

Außer, dass dies tatsächlich mit normalen, dynamischen Tabellen funktioniert!

Diese Lösung ist sehr schnell, da sie kein Javascript benötigt.

(Es könnte jedoch aus Javascript verwendet werden, wenn gewünscht. Suchen Sie alle Zellen mit Break-Word, greifen Sie alle untergeordneten Textknoten, und fügen Sie eine Null Breite zwischen jedem Zeichen. Auch dann würde das Skript nur einmal ausgeführt werden Während der Seitenbelastung sollte dies immer noch extrem performant sein.)

Null-Breite Raum ist ​

Answer 4

Es ist einfach, lange Wörter in DIV s und festen Tabellen (Tisch-Layout zu handhaben/Verpackung: feste) - nur CSS3 word-wrap anwenden : break-words.

Innerhalb dynamische Tabellen über Eigenschaft tut nur die Hälfte der Arbeit. Wir müssen den Browsern zusätzlich helfen, Breakpoints zu finden.

Eine etwas ausführlichere Erklärung finden Sie im Artikel Wrap long words within dynamic tables.