Rolf B: Tabellen scrollen

Beitrag lesen

Hallo Julian,

mit der Angabe min-width:fit-content für den Scrollcontainer ist dieser Container mindestens so breit wie der Tabelleninhalt, d.h. wenn die Tabelle breiter ist als der Viewport, ist auch der Scrollcontainer breiter und macht damit auch den Body breiter. Einen horizontalen Scrollbar auf dem Scrollcontainer erhältst Du damit nicht, weil der ja immer mindestens so breit ist wie der Inhalt.

Statt dessen erhältst Du einen horizontalen Scrollbar für den Body, und weil die Überschriften horizontal über die Breite des Body zentriert sind, scrollen sie mit, wenn Du den Body scrollst

D.h. Du musst den Scrollcontainer in der Breite begrenzen, keine Mindestbreite vorgeben. Beispielsweise könntest Du width:95vw; setzen (95% der Fensterbreite). Oder, wenn Du weißt, dass der Body einen Margin von 8px hat, die Angabe width: calc(100vw - 16px).

Das <center> Element um den Scrollcontainer herum vergiss bitte. Das ist HTML 3 oder älter und mittlerweile zutiefst missbilligt. Lass das Element weg und gib dem Scrollcontainer die Eigenschaft justify-items:center, um eine "zu schmale" Tabelle darin zu zentrieren (nicht text-align!).

Wenn Du wirklich breite Tabellen anzeigst, ist eine Breitenbegrenzung des body nicht unbedingt sinnvoll, das musst Du für Dich entscheiden. Im Normalfall setzt man eine Maximalbreite für den Body, zumeist 60em.

Für Geräte mit kleinem Bildschirm (a.k.a. Handy) musst Du im <head> Bereich noch die Viewport-Angabe machen. Ansonsten simuliert das Handy einen 960px breiten Bildschirm. Siehe hier: Grundgerüst

Ob es wirklich verfehlt ist, wie Mr Murphy meint, eine Website vertikal und horizontal scrollbar zu machen, mag ich nicht beurteilen. Grundsätzlich würde ich es ebenfalls als bedenklich ansehen, auf einem kleinen Bildschirm riesige Datenbereiche darzustellen. Als Excel-geschädigter Schreibtischtäter habe ich persönlich allerdings keine Furcht vor Datenbereichen, die in 2 oder mehr Dimensionen gescrollt werden.

Rolf

--
sumpsi - posui - obstruxi