CSS-Tabellenzelle und prozentuale Breite verstehen
Ich habe überprüft, wie Github das folgende Menü anzeigt:
Wenn Sie bemerken, wird jedem Menüelement dieselbe Breite zugewiesen. In CSS sollten wir einen Prozentwert angeben, was ist der Grund dafür? Beachten Sie, dass das übergeordnete div nicht angezeigt wird: table property.
Was ist der Grund für die prozentuale Breite?
2 Antworten
Dies hängt damit zusammen, wie das automatische Tabellenlayout funktioniert. Insbesondere:
Ein Prozentwert für eine Spaltenbreite ist relativ zur Tabellenbreite. Wenn die Tabelle 'width: auto' hat, stellt ein Prozentsatz eine Einschränkung für die Spaltenbreite dar, die ein UA erfüllen sollte. (Dies ist natürlich nicht immer möglich: Wenn die Spaltenbreite '110%' beträgt, kann die Bedingung nicht erfüllt werden.)
In Ihrem Fall setzen Sie eine minimale prozentuale Breite für jedes Tabellenzellenelement. Der Browser muss jedoch sicherstellen, dass die Tabellenzellen die Breite der Tabelle ausfüllen (die wiederum so breit ist wie ihr umgebender Block). Daher müssen die Zellen so erweitert werden, dass sie möglichst viel Platz in der Tabelle einnehmen. p>
Der Grund, warum dies zu ungefähr gleich breiten Zellen führt, liegt darin, dass der Prozentwert für alle gleich ist. Wenn Sie beispielsweise eine etwas größere Breite für eine der Zellen festlegen, werden Sie feststellen, dass sie breiter wird und die anderen Zellen schmaler werden, um Folgendes zu ermöglichen:
Beachten Sie jedoch, dass ein kleiner Unterschied ist, da einige Zellen einen längeren Inhalt als andere haben und die Länge dieses Inhalts bei der Berechnung der Zellbreiten berücksichtigt wird.
Der Grund, warum ein Wert von nur 1% verwendet wird, ist so, dass Sie weiterhin Zellen hinzufügen können, und der Browser versucht dennoch, die verfügbare Breite so gleichmäßig wie möglich zu verteilen. Sie sagen den Zellen im Wesentlichen, dass sie nicht mindestens eine bestimmte Breite haben müssen, damit Sie etwas hinzufügen können (obwohl 1% immer noch etwas ist).
Die Tatsache, dass keine Elemente display: table zugewiesen sind, ist belanglos, da ein anonymer Tabellenwrapper um die Tabellenzellen generiert wird, damit sie korrekt gerendert werden können. Dieser anonyme Tabellenwrapper funktioniert genauso wie ein nicht gestyltes Element mit display: table , was bedeutet, dass die Tabellenbreite automatisch für die Berechnung der prozentualen Zellenbreiten verwendet wird.
Dies wird als 1% width table hack bezeichnet.
Dies liegt daran, dass die Tabellenzelle ihre Breite vom übergeordneten div übernimmt, sodass Sie einen verwandten Prozentsatz der Zellenbreite angeben können.
Hier ist eine funktionierende Demo auf CodePen, mit der Sie spielen und weiter untersuchen können.
%Vor%CSS:
%Vor%Wie Sie sehen, ist es ähnlich wie in Ihrem GitHub-Beispiel codiert. Noch mehr Fragen, frage weg!
Tags und Links html css css-tables