Word-Draping einer langen Tabellenzelle und beibehalten der dynamischen Breite in anderen

Question

Ich habe eine Tabelle, die eine lange Linie in einer seiner Zellen hat. Ich muss die lange Linie aufgeteilt werden, damit die Tabelle nicht mehr als 100% breit ist. Ich fand das durch Hinzufügen table-layout: fixed und word-wrap: word-break, Es wird die lange Zelle einwickeln. Ein Nebeneffekt der Verwendung jedoch table-layout ist, dass es dazu führt, dass alle Spalten die gleiche Breite haben.

Sie können hier ein Beispiel dafür sehen:

http://jsfiddle.net/rydld/2/

Wie kann ich die breite automatische Größe der ersten Spalte nur für den Inhalt entsprechen? (dh in diesem Beispiel sollte es gerade breit genug sein, das zu zeigen 1 und 2 in dieser Spalte.)

Die Daten in der Tabelle werden dynamisch geladen, sodass eine Lösung, die die Hard -Breitenwerte codiert, nicht gut ist, da es keine Möglichkeit gibt, im Voraus zu wissen, wie weit eine Spalte sein sollte. Meine einzige Möglichkeit ist, a zu verwenden <table>, Ich kann keine verwenden <div> oder ein anderes Element.

Answer 1

Laut dem offizielle Spezifikation, wenn Sie ein festgelegtes verwenden table-layout, Die Spaltenbreiten der ersten Zeile bestimmen die Spaltenbreiten der gesamten Tabelle. Wenn keiner von ihnen definiert ist, verteilt es die Spaltenbreiten gleichmäßig.

Da es keine andere Option zu geben scheint, habe ich die folgende Methode verwendet:

1. Laden der Daten in der Tabelle, während die table-layout ist auf automatisch eingestellt.
2. Wenn ich die Breite der Spalten lese, möchte ich dynamisch sein.
3. Setzen Sie diese Spaltenbreiten auf ihre aktuellen Werte.
4. Wechseln table-layout zu reparieren.

Hier ist ein Beispiel, das nicht perfekt ist (die Breite wird um ein wenig verringert):

http://jsfiddle.net/rydld/7/

Answer 2

Ich habe dies beim Ringen mit dem gleichen Problem entdeckt:

Das Einstellen des Bruchworts auf einem Element entspricht genau dem Einsetzen eines Null-Breiten-Raums zwischen jedem Charakter des in diesem Element enthaltenen Textes.

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

Diese Lösung ist sehr schnell, da kein JavaScript erforderlich ist.

(Wenn Sie gewünscht werden, könnte dies jedoch von JavaScript verwendet werden. Finden Sie alle Zellen mit Bruchwort, schnappen Sie sich alle untergeordneten Textknoten und fügen Sie einen Null-Breiten-Speicherplatz zwischen jedem Charakter ein. Selbst dann würde das Skript nur einmal während der Seitenlast ausgeführt. Das sollte also immer noch äußerst leistungsfähig sein.)

Null-Breitenraum ist ​

Answer 3

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

word-wrap: break-word

Answer 4

Es ist leicht zu handhaben/umwickeln, lange Wörter in Divs und Feste Tabellen (Tischlayout: behoben) - Wenden Sie einfach CSS3 an WORT-WRAP: Break-Wörter.

Innerhalb Dynamische Tabellen Oben über Eigentum leistet nur die Hälfte der Arbeiten. Wir brauchen zusätzlich, um den Browsern zu helfen, Bruchpunkte zu finden.

Ein bisschen detaillierterer Erläuterung finden Sie im Artikel Wickeln Sie lange Wörter in dynamische Tabellen ein.