Heim >Web-Frontend >CSS-Tutorial >Verwendung des CSS-Tabellenlayout-Attributs
Verwendung des CSS-Tabellenlayout-Attributs
- 不言Original
- 2018-06-25 16:42:142589Durchsuche
Heute erkläre ich Ihnen ausführlich, wie Sie das Attribut table-layout verwenden, um die Algorithmusregeln von Tabellenzellen, -zeilen und -spalten anzuzeigen. In diesem Artikel wird die Verwendung von CSS-Tabellenlayoutattributen anhand von Beispielcode vorgestellt. Freunde, die es benötigen, können darauf verweisen
Vorwort:
Heute Lassen Sie uns ausführlich über die Verwendung des Tabellenlayout-Attributs sprechen.
/*eg:设置表格布局算法*/
table{
table-layout:fixed;
}
***Schlüsselwörter in diesem Artikel: Tabellenlayout-Attributwert, Definition und Verwendung, festes Tabellenlayout, automatisches Tabellenlayout .
1 Definition und Verwendung
Das tableLayout-Attribut wird verwendet, um Algorithmusregeln für Tabellenzellen, Zeilen und Spalten anzuzeigen.
①Dieses Attribut gibt den Layout-Algorithmus an, der zum Vervollständigen des Tabellenlayouts verwendet wird.
②Der Algorithmus mit festem Layout ist schneller, aber nicht sehr flexibel.
③Der automatische Layout-Algorithmus ist langsamer, spiegelt jedoch herkömmliche HTML-Tabellen besser wider.
2 Festes Tabellenlayout
① Ermöglicht dem Browser, die Tabelle im Vergleich zum automatischen Tabellenlayout schneller zu gestalten;
② Seine Ebene Das Layout hängt nur davon ab hängt von der Tabellenbreite, der Spaltenbreite, der Tabellenrandbreite und dem Zellenabstand ab und hat nichts mit dem Inhalt der Zelle zu tun.
③ Durch die Verwendung eines festen Tabellenlayouts kann der Benutzeragent die Tabelle anzeigen.
3 Bestimmen Sie automatisch das Tabellenlayout
①Die Breite der Spalte wird durch den breitesten Inhalt in der Spaltenzelle ohne Umbruch festgelegt; ②Dieser Algorithmus Manchmal dauert es lange, weil vor der Festlegung des endgültigen Layouts auf den gesamten Inhalt der Tabelle zugegriffen werden muss.
4table-layout-Attributwert①automatisch: (Standardwert) Spaltenbreite wird durch Zelleninhalt festgelegt;
②fest: Spaltenbreite wird durch festgelegt die Einstellungen für die Tabellenbreite und die Spaltenbreite;
③inherit: Gibt an, dass der Wert des Tabellenlayout-Attributs vom übergeordneten Element geerbt werden soll.
Hinweis: Alle Browser unterstützen das Tabellenlayout-Attribut. Jede Version von Internet Explorer (einschließlich IE8) unterstützt den Attributwert „inherit“ nicht! ! !
5 Theorie ist nicht so gut wie Praxis, und der Code funktioniertEgal wie viel Sie sagen, es ist besser, es schneller zu verstehen, indem Sie sich den Code ansehen ~ Schauen wir uns diese Kastanie gemeinsam an↓↓↓
(Damit jeder den Code sehen kann, habe ich den CSS- und HTML-Code zusammen geschrieben)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>table-layout属性测试</title>
<style type="text/css">
table.tb1 {
table-layout: automatic;
}
table.tb2 {
table-layout: fixed;
}
</style>
</head>
<body>
<table class="tb1" border="1" width="100%">
<tr>
<td width="20%">aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
<td width="40%">bbbbbbbbbbbbb</td>
<td width="40%">ccc</td>
</tr>
</table>
<br />
<table class="tb2" border="1" width="100%">
<tr>
<td width="20%">aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
<td width="40%">bbbbbbbbbbbbb</td>
<td width="40%">ccc</td>
</tr>
</table>
</body>
</html>
Nach dem Ausführen sehen Sie das folgende Bild:
Hier möchte ich erklären, dass vielleicht Ihr Browser breit genug ist, vielleicht aber auch Ihr Handy Sie haben nicht genügend Inhalt und können möglicherweise nicht beide sehen. Zu diesem Zeitpunkt müssen Sie die Breite des Browsers verringern oder den Inhalt der Zelle vergrößern, und Sie werden die unterschiedlichen Auswirkungen der beiden Attributwerte sehen ~~
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für alle hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website!
Verwandte Empfehlungen:
CSS3 und jQuery implementieren den Hover-Effekt, der der Mausrichtung folgtVerwendung der CSS3-3D-Rotation Rotationseffekt EinführungDas obige ist der detaillierte Inhalt vonVerwendung des CSS-Tabellenlayout-Attributs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!