Wie werden `display: table-cell` Breiten berechnet?

Question

Diese Frage kommt aus this existing question, die ich eine Lösung zur Verfügung stellte, konnte aber keine Erklärung dafür geben, warum.

ich ihre Geige bis auf die nackten Knochen und haben folgende HTML/CSS gestrippt haben:

<div class="table"> 
    <span class="cell-1">cell 1</span> 
    <span class="cell-2">cell 2</span> 
</div> 

.table { 
    display: table; 
} 

.cell-1, .cell-2 { 
    display: table-cell; 
    padding: 6px 12px; 
    border: 1px solid #ccc; 
} 

.cell-1 { 
    padding: 6px 12px; 
    background-color: #eee; 
    border-right: 0; 
    border-radius: 4px 0 0 4px; 
    width: 1%; /* *** FOCUS HERE *** */ 
} 

.cell-2 { 
    border-radius: 0 4px 4px 0; 
} 

Nur .cell-1 eine Breite hat, und das ist 1%. This is the result (fiddle link):

Wenn ich dann die Breite des .cell-1 auf einen Wert erhöhen, wo es ist breiter als Inhalt ist, sagen 10% (ich glaube, dass das Muster irgendwie ist), dann zweite Zelle schmäler wird. Warum? Woher kommt diese Breite? This is the result (fiddle link).

Wenn ich das zweite Beispiel dann nehmen, sondern fügen width: 100% zum .table dann wieder zurück auf 100% geht. Here's the result of that (fiddle link).

Ich bin sicher, es gibt eine logische Erklärung, aber ich sehe es einfach nicht. Jemand?

Answer 1

Dies ist das Ergebnis des automatischen Tabellenlayout-Algorithmus, wie er vom Browser implementiert wird. Dies kann zwischen Browsern variieren, da the CSS2.1 spec doesn't specify all auto layout behavior, aber es beschreibt einen Algorithmus, der häufig von Browsern mit HTML-Tabellen verwendet wird, da das CSS-Tabellenmodell zum größten Teil auf dem HTML-Tabellenmodell basiert.

Wenn die Tabelle in der Regel keine bestimmte Breite hat (d. H. Sie verwendet den Standardwert), dann ist die Zelle mit der prozentualen Breite so breit wie von ihrem Inhalt gefordert, und nicht mehr.Diese berechnete Breite (zusammen mit anderen in anderen Zellen angegebenen Breiten) wird dann als Prozentsatz verwendet, um die maximale Breite der gesamten Tabelle zu ermitteln, und der Rest der Spalten wird entsprechend angepasst. Beachten Sie, dass die Tabelle weiterhin durch ihren umschließenden Block eingeschränkt werden kann (in Ihrem Beispiel ist dies der anfängliche umschließende Block, der vom Ergebnisbereich festgelegt wurde).

Auf meinem PC mit Firefox .cell-1 hat eine berechnete Breite von 33 Pixeln. Wenn Sie die Breite auf 1% festlegen, beträgt die maximale Breite der Tabelle 3300 Pixel (33 × 100 = 3300). Sie würden einen sehr großen Bildschirm benötigen, um dies in Ihrem Beispiel zu sehen, also I removed the padding which drastically reduces the width of .cell-1 to 9 pixels and thus the maximum table width to 900 pixels. Wenn Sie die Größe des Vorschaufensters auf mehr als 900 Pixel ändern, werden Sie feststellen, dass die Tabelle an diesem Punkt nicht mehr wächst.

Wenn Sie die Breite von .cell-1 auf 10% erhöhen, werden die gleichen 33 Pixel jetzt 10% der maximalen Breite der Tabelle. Die maximale Tabellenbreite wiederum beträgt 330 Pixel (was tatsächlich 10% von 3300 Pixel ist, weil 100 × 10 = 10 ist).

In dem Moment, in dem Sie die Breite .table als 100% angeben, wird die Größe der Tabelle entsprechend dem enthaltenen Block festgelegt. In Ihrem Fall bedeutet das nur, dass Sie es auf die gesamte Breite des Ergebnisbereichs ausdehnen. .cell-1 muss immer noch seine width: 10% Deklaration befolgen, also erstreckt es sich auf 10% der Breite der Tabelle, da der Inhalt nichts weiter benötigt. Wenn Sie die Größe des Ergebnisbereichs auf eine sehr kleine Breite ändern, werden Sie sehen, dass mit der Tabelle zusammenschrumpft, aber nicht nach der minimalen Inhaltsbreite.

Answer 2

standardmäßig CSS tables haben 3-Komponenten anstelle von HTML tables

• display:table

  standardmäßig wird dies den Inhalt Breite, es sei denn die UA Stile mit der width: xx% Eigenschaft überschreiben

• display:table-row

  Dieses Attribut hat keine Höhe für sich selbst und folgt nur der Dimesnion der td, d. H. Tabellenzelle darin.

• display:table-cell

  wie display:table, es nimmt auch die Breite des übergeordneten, .i.e., table und gleichmäßig verteilt ist, in Bezug auf die Breite zu ihren Geschwistern. für zB, wenn Sie 200px breite Tabelle mit 5 Zellen haben (und keine von ihnen haben Breite manuell definiert), würden alle table-cell gleich px unter ihnen nehmen .... 40px jeweils !!