Verwendung des Attributs table-layout:fixed in CSS

table-layout:fixed Verwendung des Attributs :
Wenn Sie eine Tabelle mit fester Größe wünschen, muss der darin enthaltene Text zwangsweise umbrochen werden (insbesondere in einer langen Tabelle). Um zu verhindern, dass der zu lange Text

die Tabelle unterbricht, verwenden Sie im Allgemeinen den Stil: Tabellenlayout: behoben. Allerdings wird es unter Firefox einige Probleme geben. Ich habe auf einige Praktiken von Gmail verwiesen und mehrere

Tests durchgeführt, um eine Lösung zu finden.

Beispiel 1: (IE-Browser) Gewöhnliche Situation

CODE:

< ;tr> ;

abcdefghigklmnopqrstuvwxyz 1234567890

Sie können sehen, dass width=80 nicht funktioniert, Tabelle Spread geöffnet nach Charakteren.

Beispiel 2: (IE-Browser) verwenden Sie den Stil table-layout:fixed

CODE:

< ; /table>

width=80 funktioniert, aber die Tabelle wird umgebrochen.

Beispiel 3: (IE-Browser) mit style table-layout:fixed und nowrap

CODE:

abcdefghigklmnopqrstuvwxyz 1234567890

width=80 funktioniert, und Zeilenumbrüche werden ebenfalls eliminiert.


Beispiel 4: (IE-Browser) Verwenden Sie den Stil table-layout:fixed und nowrap, wenn Sie einen numerischen Wert verwenden, um die TD-Größe festzulegen.

CODE:

abcdefghigklmnopqrstuvwxyz 1234567890

< width="20" nowrap>abcdefghigklmnopqrstuvwxyz 1234567890

<.>

abcdefghigklmnopqrstuvwxyz 1234567890

Leider funktioniert der Nowrap des ersten td nicht


Beispiel 5: (IE-Browser) Verwenden Sie den Stil table-layout:fixed mit der prozentualen festen td-Größe nowrap

CODE:

abcdefghigklmnopqrstuvwxyz 1234567890

abcdefghigklmnopqrstuvwxyz 1. 234567890< /tr>

In Prozent geändert, endlich geschafft

Beispiel 6: (Firefox-Browser) Prozent verwenden, um die td-Größe festzulegen. In diesem Fall verwenden Sie die Stiltabellenlayout: behoben und Nowrap-Effekt: Setzen Sie Beispiel 5 unter Firefox, und es schlägt erneut fehl und nowrap, und verwenden Sie p
CODE:

/p>
< /td>

Die Welt ist endlich in Frieden

Beispiel 8: (Firefox-Browser) mit numerischem festen td Verwenden Sie die Styles table-layout:fixed und nowrap im Fall der Größe und verwenden Sie p

CODE:


CODE:

< tr> ;

abcdefghigklmnopqrstuvwxyz 1234567890

abcdefghigklmnopqrs tuvwxyz 1234567890

nowrap funktioniert wieder nicht
Schließlich ist Beispiel 7 das Richtige Das funktioniert in IE und Firefox und kann das Problem erzwungener Zeilenumbrüche auf Seiten perfekt lösen.



Ich habe auch weiterhin einige Informationen überprüft. Da es nur auf die Breite der ersten Zeile ankommt, kann ich die erste Zeile definieren?

Das colgroup-Attribut wurde entdeckt.

Das obige ist der detaillierte Inhalt vonVerwendung des Attributs table-layout:fixed in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!