Heim > Artikel > Web-Frontend > Was macht das Tabellenlayout-Attribut in CSS? Einführung in zwei Layoutmethoden für Tabellen (Codebeispiele)
Was macht das Tabellenlayout-Attribut in CSS? Einführung in zwei Layoutmethoden für Tabellen (Codebeispiele)
- 青灯夜游Original
- 2018-09-15 11:45:363096Durchsuche
Bei der Entwicklung von Front-End-Webseiten werden häufig einige CSS-Layoutmethoden verwendet, um das Schreiben der gesamten Seite schnell abzuschließen. Es gibt viele CSS-Layoutmethoden, und das Tabellenlayout ist eine davon. Heute erklären wir das CSS-Tabellenlayout-Attribut im Tabellenlayout und stellen die beiden Layoutmethoden der Tabelle vor. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.
1. Was ist das Tabellenlayout-Attribut?
1. Definition
Tabellenlayout-Attribut wird verwendet, um die Algorithmusregeln von Tabellenzellen, Zeilen und Spalten anzuzeigen
2 >
table-layout: automatic || fixed || inherit;automatisch (automatisch): (Standardwert) Spaltenbreite wird durch Zelleninhalt festgelegt; fest: Spaltenbreite wird durch Tabellenbreite und Spaltenbreite festgelegt; erben: angegeben Der Wert des Tabellenlayout-Attributs sollte vom übergeordneten Element geerbt werden. 3.Tabellenlayout-Attributbeschreibung
- Dieses Attribut gibt den Layoutalgorithmus an, der zum Vervollständigen des Tabellenlayouts verwendet wird.
- Der Algorithmus mit festem Layout (fest) ist schneller, aber nicht sehr flexibel.
- Der automatische Layout-Algorithmus (Auto) ist langsamer, spiegelt jedoch herkömmliche HTML-Tabellen besser wider.
2. Einführung in zwei Layoutmethoden (automatisches Layout und festes Layout)
1. Automatisches Layout (automatisch)
Im automatischen Layout wird die Breite der Spalte durch den breitesten Inhalt ohne Umbruch in der Spaltenzelle festgelegt, daher ist das Festlegen der Breite der Zelle ungültig. Der Autolayout-Algorithmus kann manchmal langsam sein, da er auf den gesamten Inhalt der Tabelle zugreifen muss, bevor er das endgültige Layout bestimmt. Codebeispiel:<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自动布局</title>
<style>
table.ex {table-layout: auto}
</style>
</head>
<body>
<table class="ex" border="1" width="100%">
<tr>
<td width="100px">td里的内容，我会全部显示:我是测试代码我是测试代码我是测试代码我是测试代码我是测试代码我是测试代码我是测试代码</td>
<td width="100px">我是测试代码</td>
</tr>
</table>
</body>
</html>Rendering:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>固定布局</title>
<style>
table.ex {table-layout: fixed}
</style>
</head>
<body>
<table class="ex" border="1" width="500px">
<tr>
<td width="">1000000000000000000000000000000</td>
<td width="">我是测试代码</td>
</tr>
</table>
</body>
</html>Rendering: 
zwei Hinweise zur Breite des td-Labels (Zelle) :
- Wenn das td-Label (Zelle) ) ist eine angegebene Zelle), wird die Breite jeder td-Beschriftung (Zelle) unabhängig vom Inhalt auf die angegebene Breite begrenzt (wenn ein Verhältnis angegeben wird, wird dieses Verhältnis für immer beibehalten), sodass der Inhalt schweben kann td label (cell) case).
- Wenn die Breite der td-Beschriftung (Zelle) nicht angegeben ist, wird sie entsprechend der Gesamtbreite der Tabelle gleichmäßig auf jede td-Beschriftung (Zelle) aufgeteilt.
Hinweis:
Wenn der Inhalt der Tabelle auf Chinesisch ist, wird der Text im Allgemeinen automatisch umgebrochen, wenn der Inhalt zu lang ist. Wenn der Inhalt in der Tabelle jedoch auf Englisch oder in Zahlen verfasst ist und der Inhalt zu lang ist, wird der Text außerhalb der Zelle angezeigt, d. h. der Inhalt wird nicht automatisch umgebrochen. Verwenden Sie zu diesem Zeitpunkt einfach das Attributword -wrap:break in CSS3 -word; und word-break:break-all; werden zusammen verwendet, um das Problem zu lösen.
Das obige ist der detaillierte Inhalt vonWas macht das Tabellenlayout-Attribut in CSS? Einführung in zwei Layoutmethoden für Tabellen (Codebeispiele). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!