Ich habe eine Tabelle mit 3 Spalten
%Vor%Was passiert ist, dass die letzte Spalte zuerst ihren Inhalt und dann die Beschreibungsspalte umschließt. Ich möchte, dass die Spalte "Beschreibung" zuerst umbrochen wird. Ich habe versucht, white-space: nowrap hinzuzufügen, aber dann wird die Spalte Actions nie umbrochen.
Wie entscheidet der Browser, welche Spalte umbrochen werden soll?
Ich möchte, dass die Spalte 3 die letzte ist, die umbrochen wird. Bis die Spalte Beschreibung vollständig umbrochen ist, sollten die Schaltflächen in einer einzelnen Zeile angezeigt werden. Wenn kein Platz mehr vorhanden ist, kann die Spalte umbrochen werden.
Spalten umschließen ihren Text in absteigender Reihenfolge in einer Tabelle. Sie müssen also nur die Breite der letzten Spalte korrigieren.
Wenn Sie möchten, dass es erneut in kleinen Bildschirmen angezeigt wird, fügen Sie einfach eine Medienabfrage hinzu (siehe CSS), um die Breite auf auto zurückzusetzen und der Spalte die Priorität zu geben, die sie umbrechen soll.
Siehe den Abschnitt Automatisches Tabellenlayout in der Spezifikation:
Spaltenbreiten werden wie folgt bestimmt:
Berechnen Sie die minimale Inhaltsbreite (MCW) jeder Zelle: Der formatierte Inhalt kann eine beliebige Anzahl von Zeilen umfassen, darf jedoch nicht überlaufen die Zellenbox. Wenn die angegebene "Breite" (W) der Zelle größer ist als MCW ist W die minimale Zellenbreite. Ein Wert von "auto" bedeutet das MCW ist die minimale Zellenbreite.
Berechnen Sie auch die "maximale" Zellenbreite jeder Zelle: formatieren Sie den Inhalt, ohne die Zeilen zu trennen, außer an der expliziten Zeile Pausen auftreten.
Ermitteln Sie für jede Spalte eine maximale und minimale Spaltenbreite aus den Zellen, die nur diese Spalte umfassen. Das Minimum ist das von die Zelle mit der größten minimalen Zellenbreite (oder die Spalte 'Breite' , je nachdem, welcher Wert größer ist). Das Maximum ist das, was von benötigt wird die Zelle mit der größten maximalen Zellenbreite (oder die Spalte 'Breite' , je nachdem, welcher Wert größer ist.
Erhöhen Sie für jede Zelle, die sich über mehr als eine Spalte erstreckt, die Mindestbreite der Spalten, die sie überspannt, so dass sie mindestens gleich sind breit wie die Zelle. Machen Sie dasselbe für die maximalen Breiten. Wenn möglich, Erweitern Sie alle überspannten Spalten um ungefähr den gleichen Betrag.
Erhöhen Sie für jedes Spaltengruppenelement mit einer anderen "Breite" als "auto" die Mindestbreite der Spalten, die es umfasst, zusammen Sie sind mindestens so breit wie die Spaltenbreite der Spaltengruppe.
Dies gibt eine maximale und minimale Breite für jede Spalte.
Das Minimum der Untertitelbreite (CAPMIN) wird durch Berechnung von bestimmt jeder Titel die minimale Untertitelbreite als MCW von a hypothetische Tabellenzelle, die die als formatierte Überschrift enthält "Bildschirmsperre". Die größte der minimalen Untertitelbreiten ist CAPMIN.
Spalten- und Beschriftungsbreiten beeinflussen die endgültige Tabellenbreite wie folgt:
- Wenn das Element 'table' oder 'inline-table' 'width' ist Eigenschaft hat einen berechneten Wert (W) anders als 'auto', die verwendete Breite ist die größer von W, CAPMIN und die minimale Breite, die von allen benötigt wird Spalten plus Zellenabstand oder Rahmen (MIN). Wenn die verwendete Breite ist größer als MIN, sollte die zusätzliche Breite über die verteilt werden Spalten.
- Wenn das Element 'table' oder 'inline-table' 'width: auto' hat, ist die verwendete Breite die größere der Blockbreite der Tabelle, CAPMIN und MIN. Wenn jedoch entweder CAPMIN oder die maximale Breite von den Spalten plus Zellabstand oder Grenzen (MAX) erforderlich ist weniger Als die des umschließenden Blocks, verwenden Sie max (MAX, CAPMIN).
Beachten Sie
Wenn die verwendete Breite größer als MIN ist, sollte die zusätzliche Breite sein über die Spalten verteilt.
Es spezifiziert jedoch nicht, wie es verteilt werden sollte.
Außerdem ist der Algorithmus nicht normativ:
Dieser Algorithmus spiegelt das Verhalten einiger bekannter HTML-Benutzer wider Agenten beim Schreiben dieser Spezifikation. UAs müssen nicht Implementieren Sie diesen Algorithmus.
Daher ist das Verhalten implementierungsabhängig .