Was macht das Tabellenlayout-Attribut in CSS? Einführung in zwei Layoutmethoden für Tabellen (Codebeispiele)-CSS-Tutorial-php.cn

Was macht das Tabellenlayout-Attribut in CSS? Einführung in zwei Layoutmethoden für Tabellen (Codebeispiele)

青灯夜游

Freigeben： 2018-09-15 11:45:36

Original

3105 Leute haben es durchsucht

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;

Nach dem Login kopieren

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.

Hinweis:

Alle Browser unterstützen das Tabellenlayout-Attribut, aber keine Version von Internet Explorer (einschließlich IE8) unterstützt den Attributwert „inherit“! ! !

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>

Nach dem Login kopieren

Rendering:

Was macht das Tabellenlayout-Attribut in CSS? Einführung in zwei Layoutmethoden für Tabellen (Codebeispiele)

Wie im Bild oben gezeigt: Im automatischen Layout das td-Tag Die Breite und Höhe ändern sich je nach Inhaltsmenge im td-Tag.

2. Festes Layout (fest)

Im Vergleich zum automatischen Layout ermöglicht das feste Layout dem Browser, die Tabelle schneller zu gestalten. Das horizontale Layout hängt nur von der Tabellenbreite, der Spaltenbreite und dem Tabellenrand ab Breite, Zellenabstand, unabhängig vom Zelleninhalt; durch die Verwendung eines festen Tabellenlayouts kann der Benutzeragent die Tabelle anzeigen, sobald die erste Zeile empfangen wird.

Codebeispiel:

<!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>

Nach dem Login kopieren

Rendering:

Was macht das Tabellenlayout-Attribut in CSS? Einführung in zwei Layoutmethoden für Tabellen (Codebeispiele)

Wie Sie auf dem Bild oben sehen können: Legen Sie die Breite des fest Tabelle bis Nach 500 Pixel wird die Breite der beiden TD-Beschriftungen (Zellen) in der Tabelle automatisch gleichmäßig aufgeteilt, sodass der Inhalt über die Breite der ersten TD-Beschriftung (Zelle) hinaus in die zweite TD-Beschriftung (Zelle) überläuft.

Im festen Layout gibt es

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 Attribut

word -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!