Die berechnete Spaltenbreite unterscheidet sich von der css-deklarierten Breite für die Spalte. Wie entscheidet der Browser über die Breite?

Question

Nehmen wir an, ich habe eine HTML-Tabelle mit einer CSS-Breite von 750px deklariert. Es hat 5 Spalten und jede Spalte hat eine Breite von 50px, deklariert mit CSS (alle Tds haben eine 50px Breite). Offensichtlich ist die Summe der Spaltenbreiten 250px, was weniger als 750px ist.

Wenn der Browser die Tabelle rendert, hat jede Spalte eine andere berechnete Breite. Ich habe eine Spalte, die nur 5 Leerzeichen hat, aber eine berechnete Breite von über 100px (viel mehr als 5  ).

Alle Spalten passen ihren enthaltenen Text plus einige zusätzliche Leerzeichen. Im Markup befinden sich keine fest codierten Spaltenbreiten. Nur eine einzige 50px in der CSS für die 'td'.

Wie berechnet der Browser die gerenderte Breite jeder Spalte?

Answer 1

Wenn Sie die Breite von Tabellenspalten festlegen, ist dies nur eine empfohlene Mindestbreite, die der Browser nach Möglichkeit zu berücksichtigen versucht. Die tatsächliche Breite der Spalten wird aus der Größe ihres Inhalts berechnet, wobei der verbleibende Platz gleichmäßig zwischen den Spalten aufgeteilt wird.

Wenn eine der Spalten schmaler als die von Ihnen angegebene Breite würde, würde der Browser versuchen, sie anzupassen, wenn in anderen Spalten freier Speicherplatz vorhanden ist, aber in Ihrem Fall sind die Spalten bereits über dem Minimum.

Der tatsächliche Algorithmus zum Berechnen der Zellengrößen ist von Browser zu Browser unterschiedlich, was bedeutet, dass die Spalten je nachdem, welchen Browser Sie verwenden, geringfügig abweichen.

Answer 2

Dies wird als Box-Modell bezeichnet. Padding und Rahmen werden der Elementbreite hinzugefügt. Ein DIV-Element mit padding: 10px; width: 50px; border: 1px solid black; ist also 72 Pixel breit. Ich erwarte, dass deine TDs einen Rand oder eine Polsterung haben?

Answer 3

Browser versuchen, die Zellen in die Tabellenbreite zu passen und erweitern/kontrahieren die td s je nach Bedarf.

Also, Sie legen die Tabelle auf 750px, aber gab nur 250px der Breite. In diesem Fall wird der Browser auf sein herkömmliches Abstandsschema zurückgreifen, bei dem basierend auf dem Inhalt in jeder Zelle versucht wird, die Zellen gleichmäßig zu verteilen.

Sie können mehr darüber lesen, wie dies funktioniert here.

Answer 4

Sie müssen den Tabellenlayoutstil verwenden. Es gibt 3 mögliche Werte:

• automatisch. Der Standard. Die Breite ist abhängig vom Inhalt.
• behoben. Hängt von den angegebenen Breiten im CSS ab.
• erben. Erbt den Wert von seinem übergeordneten Element.

In Ihrem Fall müssen Sie Tabellenlayout verwenden: behoben; auf deinem Tischelement.