Eine ausführliche Einführung in die Berechnungsregeln für die Tabellenzellenbreite in HTML

Über die Rendering-Regeln der TabelleBreite

Die Berechnungsmethode für die Tabellenzellenbreite ist hauptsächlich in zwei Methoden unterteilt : Festes Tabellenlayout und automatisches Tabellenlayout, Leute, die oft CSS schreiben, sollten das noch wissen, aber wir stellen oft fest, dass das Festlegen der Breite der Tabellenspalte nicht funktioniert oder sie ohne feste Breite gerendert wird. Ist das normal? Lassen Sie uns vorstellen, wie diese beiden Methoden das Rendering berechnen.

Legen Sie zunächst einige gemeinsame Variablen fest:

• TabelleBreite=Tabellenbreite=100 %

• tableBorderWidth=Die linke und rechte Randbreite der Tabelle

• tdBorderWidth=Die Summe der linken und rechten Randbreiten aller Spalten (die kombinierten Ränder zählen als 1 Pixel)

• tdPadding=Der linke und rechte Abstand aller Spalten und

• tdWidth=Die Breite aller Spalten mit definierter Breite und

• tdLLänge=Anzahl der Spalten

1. Festes Tabellenlayout, Tabelle hinzufügen -layouttable-layout:fixed

ps: Bei einem festen Tabellenlayout hat die Breite der Tabellenspalten nichts mit dem Spalteninhalt zu tun, sondern hängt nur mit der Tabellenbreite zusammen. Spaltenbreite, linker und rechter Tabellenrand, linker und rechter Spaltenrand und linker und rechter Spaltenabstand

Durch die Verwendung eines festen Tabellenlayouts kann der Benutzeragent die Tabelle nach Erhalt der ersten Zeile anzeigen, d. h. nur die Die Breite der ersten Zeile funktioniert

Die Breite der Spalte mit width auto (d. h. wenn die Breite nicht definiert ist). Die Breite der Spalte, wenn das Berechnungsergebnis negativ ist, ist sie 0) = (tableWidth-tableBorderWidth -tdBorderWidth-tdPadding-tdWidth)/tdLength

1. Alle Breiten sind undefiniert

Die Breite jeder Spalte ist gleichmäßig über die Tabellenbreite verteilt

th1	th2	th3	th4	th5	th6	th7	th8	th9	th10
row1row1row1row1row1row1row1row1	row2row2row2row2row2row2row2row2	row3	row4row4row4row4row4row4row4row4	row5row5row5row5row5row5row5row5	row6	row7row7row7row7row7row7row7row7	row8row8row8row8row8row8row8row8	row9row9row9row9row9row9row9row9	row10row10row10row10row10row10row10

2. Alle haben eine festgelegte Breite und die Summe aller Spaltenbreiten ist kleiner als die Tabellenbreite (tableBorderWidth+tdBorderWidth+tdPadding+tdWidth <= tableWidth)

Die Breite jeder Spalte ist gleichmäßig verteilt durch die Gesamtbreite; die Breite der Tabelle ist ihre definierte Breite

th1	th2	th3	th4	th5	th6	th7	th8	th9	th10
row1row1row1row1row1row1row1row1	row2row2row2row2row2row2row2row2	row3	row4row4row4row4row4row4row4row4	row5row5row5row5row5row5row5row5	row6	row7row7row7row7row7row7row7row7	row8row8row8row8row8row8row8row8	row9row9row9row9row9row9row9row9	row10row10row10row10row10row10row10

3. Alle haben eine definierte Breite und die Summe aller Spaltenbreiten ist größer als die Tabellenbreite (tableBorderWidth+tdBorderWidth+tdPadding+tdWidth > tableWidth)

Die Breite jedes einzelnen Spalte ist selbstdefinierte Breite; die Breite der Tabelle ist die Summe der Breiten aller Spalten (die die durch die Tabelle definierte Breite überschreiten)

th1	th2	th3	th4	th5	th6	th7	th8	th9	th10
row1row1row1row1row1row1row1row1	row2row2row2row2row2row2row2row2	row3	row4row4row4row4row4row4row4row4	row5row5row5row5row5row5row5row5	row6	row7row7row7row7row7row7row7row7	row8row8row8row8row8row8row8row8	row9row9row9row9row9row9row9row9	row10row10row10row10row10row10row10

4. Die Breite des Teils th wird bestimmt und gleichzeitig wird die Breite von th bestimmt. Die Breite der Spalte ist dann kleiner als die Tabellenbreite (tableBorderWidth+tdBorderWidth+tdPadding+tdWidth <= tableWidth)

ps: Die Spalten mit dunkelgrauem Hintergrund sind Spalten mit definierter Breite

Spalten mit definierter Breite Die Breite ist die durch sich selbst definierte Breite. Die Breite anderer Spalten ohne definierte Breite ist die Gesamtbreite der Tabelle minus die Summe der definierten Breiten und dann gleichmäßig verteilt

th1	th2	th3	th4	th5	th6	th7	th8	th9	th10
row1row1row1row1row1row1row1row1	row2row2row2row2row2row2row2row2	row3	row4row4row4row4row4row4row4row4	row5row5row5row5row5row5row5row5	row6	row7row7row7row7row7row7row7row7	row8row8row8row8row8row8row8row8	row9row9row9row9row9row9row9row9	row10row10row10row10row10row10row10

5. Teil th bestimmt die Breite und gleichzeitig die Breite der Spalte mit th width Es wurde festgestellt, dass sie größer als die Tabellenbreite ist (tableBorderWidth+tdBorderWidth+tdPadding+tdWidth > tableWidth)

ps: Die Spalten mit dunkelgrauem Hintergrund haben definierte Breiten

Die tatsächliche Breite einer Spalte mit Eine definierte Breite ist ihre eigene definierte Breite. Die Breite anderer Spalten ohne definierte Breite ist die Gesamtbreite der Tabelle abzüglich der Summe der definierten Breiten und dann gleichmäßig verteilt. Die Breite nach der Durchschnittsverteilung ist kleiner als Null 🎜>AndereSpalten ohne definierte Breite haben eine Breite von 0

2. Automatisches Tabellenlayout, Tabelleneinstellung table-layout:auto (der Standardwert des -Attributs ist auto)

Die Breite jeder Spalte wird durch die Breite der Zelle ohne bestimmt Die Breite des Inhalts ist manchmal sehr langsam, da alle Spalten in der Tabelle überprüft werden müssen.

1 Mindestbreite.

Die Breite jeder Spalte wird vollständig durch den darin enthaltenen Inhalt bestimmt.

th1	th2	th3	th4	th5	th6	th7	th8	th9	th10
row1row1row1row1row1row1row1row1	row2row2row2row2row2row2row2row2	row3	row4row4row4row4row4row4row4row4	row5row5row5row5row5row5row5row5	row6	row7row7row7row7row7row7row7row7	row8row8row8row8row8row8row8row8	row9row9row9row9row9row9row9row9	row10row10row10row10row10row10row10

2. Alle definieren die Mindestbreite, und die Summe aller basierend auf dem Inhalt berechneten Spalten ist kleiner als die Tabellenbreite

Die Breite jeder Spalte wird zunächst anhand des Inhalts berechnet, sodass er nicht kleiner als die definierte Mindestbreite sein darf und die überschüssige Breite gleichmäßig über jede Spalte verteilt wird.

th1	th2	th3	th4	th5	th6	th7	th8	th9	th10
row1	row2row2row2row2row2row2row2row2	row3	row4	row5	row6	row7	row8	row9	row10

3. Alle definieren die Mindestbreite, und die Summe aller basierend auf dem Inhalt berechneten Spalten ist größer als die Tabellenbreite

Die Breite jeder Spalte basiert erstens auf der Inhaltsberechnung, zweitens darf sie nicht kleiner als die definierte Mindestbreite sein

th1	th2	th3	th4	th5	th6	th7	th8	th9	th10
row1	row2row2row2row2row2row2row2row2	row3	row4row4row4row4row4row4row4row4	row5	row6row6row6row6row6row6row6row6	row7	row6row6row6row6row6row6row6row6	row9	row10row10row10row10row10row10row10

4. Teil th definiert die Mindestbreite, und die Summe aller auf Basis des Inhalts berechneten Spalten ist kleiner als die Tabellenbreite

ps: Die Spalten mit dunkelgrauem Hintergrund sind Spalten mit einer definierten Mindestbreite

Die Breite jeder Spalte beträgt Zuerst wird es basierend auf dem Inhalt berechnet, zweitens darf es nicht kleiner sein als die definierte Mindestbreite und schließlich darf die von der Tabelle wiedergegebene Breite nicht kleiner sein als die von der Tabelle selbst definierte Breite.

5. Teil th definiert die Mindestbreite, und die Summe aller basierend auf dem Inhalt berechneten Spalten ist kleiner als die Tabellenbreite

ps: Die dunkelgrau hinterlegten Spalten definieren die Mindestbreite der Spalte

Alle Die Spaltenbreite wird erstens anhand des Inhalts berechnet und zweitens darf sie nicht kleiner als die definierte Mindestbreite sein

th1	th2	th3	th4	th5	th6	th7	th8	th9	th10
row1	row2row2row2row2row2row2row2row2	row3	row4row4row4row4row4row4row4row4	row5	row6row6row6row6row6row6row6row6	row7	row6row6row6row6row6row6row6row6	row9	row10row10row10row10row10row10row10

Das obige ist der detaillierte Inhalt vonEine ausführliche Einführung in die Berechnungsregeln für die Tabellenzellenbreite in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!