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

Dies ist das Ergebnis des automatischen Tabellenlayout-Algorithmus, wie er vom Browser implementiert wird. Dies kann von Browser zu Browser variieren, da die CSS2.1-Spezifikation nicht das gesamte Verhalten des automatischen Layouts angibt , aber es beschreibt einen Algorithmus, der häufig von Browsern mit HTML-Tabellen verwendet wird, weil das CSS-Tabellenmodell größtenteils auf dem HTML-Tabellenmodell basiert.

Wenn die Tabelle im Allgemeinen keine angegebene Breite hat (d. h. sie verwendet den Standardwert auto ), ist die Zelle mit der prozentualen Breite so breit wie für ihren Inhalt erforderlich, 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 hat .cell-1 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 habe ich das Padding entfernt, was die Breite von .cell-1 drastisch auf 9 reduziert Pixel und damit die maximale Tabellenbreite auf 900 Pixel . Wenn Sie die Größe des Vorschaufensters auf mehr als 900 Pixel einstellen, werden Sie sehen, 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 beträgt wiederum 330 Pixel (was tatsächlich 10% von 3300 Pixel entspricht, da 100 × 10 = 10 ist).

In dem Moment, in dem Sie die Breite von .table als 100% angeben, wird die Größe der Tabelle entsprechend ihrem umschließenden Block festgelegt. In Ihrem Fall bedeutet das nur, dass Sie es auf die gesamte Breite des Ergebnisbereichs ausdehnen. .cell-1 muss weiterhin der Deklaration width: 10% folgen, also erstreckt es sich auf 10% der Breite der Tabelle, da der Inhalt nichts weiter benötigt. Wenn Sie die Größe des Ergebnisfensters auf eine sehr kleine Breite einstellen, sehen Sie, dass .cell-1 zusammen mit der Tabelle schrumpft, aber nicht über die minimale Inhaltsbreite hinaus.

Standardmäßig hat CSS tables 3 Komponenten anstelle von HTML tables

• display:table

  Standardmäßig nimmt dies die Breite des Inhalts an, es sei denn, die UA-Stile überschreiben diese mit der Eigenschaft width: xx%

• display:table-row

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

• display:table-cell

  wie display:table , nimmt auch die Breite seines Elternteils, .i.e., table , und wird gleichmäßig in Bezug auf die Breite unter seinen Geschwistern geteilt. für zB, wenn Sie 200px breite Tabelle mit 5 Zellen haben ( und keine von ihnen haben die Breite manuell definiert ), würden alle table-cell gleich px unter ihnen nehmen .... 40px jeder !!