Nach langem Rumprobieren und einigen Fehlversuchen hab ich mir die Darstellung von Tabelleninhalten in verschiedenen Browsertypen einmal genauer angesehen. Der Grund war ein Klassiker der Webentwicklung: Prozentuale Breiten wie width: 30% in -Elementen werden je nach Browser-Engine anders interpretiert – besonders bei table-layout: auto (dem Standard). Die Engine-Gruppen teilen sich klar in zwei Lager: Gecko (Firefox) vs. Blink/WebKit (Chrome-Familie).
Gruppe 1: Gecko-Engine (Firefox, ältere Tor-Browser)
Firefox berechnet Padding nach der width-Festlegung und lässt Zellen oft über den Container hinauswachsen (Overflow). Prozentwerte werden strikt respektiert, Inhalte dominieren bei table-layout: auto. min-width: % wird angewendet, was zu breiteren Spalten führt.
Gruppe 2: Blink/WebKit-Engine (Chrome, Edge, Safari, Opera)
Chrome & Co. integrieren Padding vor der Breitenberechnung (box-sizing-ähnlich) und komprimieren dynamisch, um im Container zu bleiben. Der Algorithmus priorisiert Gesamtlayout, ignoriert oft min-width: % und passt Spalten „intelligent“ an Inhalte an.
Andere Browser und Edge-Cases
- Edge (Chromium-basiert): Identisch zu Chrome seit 2020
- Safari (WebKit): Chrome-ähnlich, aber bei komplexen Tabellen langsamer
- Internet Explorer/Edge Legacy (Trident): Ignoriert Prozente oft komplett, Inhaltsbreite dominiert
Die universelle Lösung
table {
table-layout: fixed;
width: 100%;
box-sizing: border-box;
}
td { box-sizing: border-box; }
Genau gesagt: fixed erzwingt identisches Verhalten: Prozente beziehen sich exakt auf Tabellenbreite, Inhalte werden abgeschnitten statt Layout zerstört. Funktioniert seit CSS2.1 cross-engine.
Das lässt sich auch global via CSS anpassen. Sofern keine weiteren !important-Anweisungen greifen, kann man mit folgendem Code im CSS (oder Custom CSS bei z.B. WordPress) eine globale Regel erstellen:
/* Globaler Cross-Browser Table-Fix */
table {
table-layout: fixed !important;
box-sizing: border-box !important;
width: 100% !important;
}
td, th {
box-sizing: border-box !important;
}
/* Ausnahmen für spezielle Tabellen */
table.responsive-table,
table.wp-block-table {
table-layout: auto !important;
}
**Ausnahmen für responsive Tabellen sind essenziell, weil table-layout: fixed die Responsivität zerstört:
/* FIXED zerstört Responsivität */
table.responsive {
table-layout: fixed; /* Spalten fixiert, kein Anpassen! */
overflow-x: auto; /* Scrollbar, aber keine Anpassung */
}
/* AUTO ermöglicht Responsivität */
table.responsive {
table-layout: auto; /* Spalten passen sich an */
overflow-x: auto; /* + Media Queries für Mobile */
}
- Responsive-Mechanismen (Plugins/Gutenberg):
Horizontales Scrollen auf Mobile: overflow-x: auto + min-width
Umstapelnde Zellen: @media versteckt Spalten, stapelt Inhalt
Kartoffel-Layout: Tabellen werden zu -Stacks auf XS-Screens
- Beispiele, die kaputtgehen mit fixed
WordPress Gutenberg Table Block → responsive-table class
TablePress Plugin → tablepress-id-*
WP DataTables → responsive
„Automatic Responsive Tables“ Plugin → table-scroll
- Perfekte globale Lösung
/* Globaler Fix: ALLE Tabellen außer responsive */
table:not(.responsive-table):not(.wp-block-table):not(.tablepress):not([class*=“responsive“]) {
table-layout: fixed !important;
box-sizing: border-box !important;
}
td, th { box-sizing: border-box !important; }
Ergebnis: Normale Tabellen cross-browser konsistent, responsive bleiben funktional.
