Heim > Artikel > Web-Frontend > Verwendung des CSS-Tabellenlayout-Attributs

Verwendung des CSS-Tabellenlayout-Attributs

不言Original: 2018-06-25 16:42:142528Durchsuche

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 funktioniert

Egal 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 folgt

Verwendung der CSS3-3D-Rotation Rotationseffekt Einführung

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

php jquery css css3 html 继承 table 算法

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Dynamischer CSS3-Eingabeaufforderungseffekt, wenn die Maus in das Bild bewegt wirdNächster Artikel：Dynamischer CSS3-Eingabeaufforderungseffekt, wenn die Maus in das Bild bewegt wird

In Verbindung stehende Artikel

Mehr sehen