Tabelle horizontal scrollen

[Rolf B]

Hallo Gerhard,

okay, das ist eine Seite, wo die Tabelle dominiert.

Der horizontale Scrollbar ist immer am unteren Rand des Scroll-Containers (also dieses div, wo Du die Ausrufezeichen hinter gesetzt hast. Heißt: Damit dieser Scrollbar sichtbar bleibt, muss die Unterkante des Scrollcontainers sichtbar bleiben. Dafür gibt's unterschiedlichste Varianten, unter anderem auch Sticky-Positionierung, aber in der aktuellen Situation am einfachsten ist es, den Body so hoch wie das Fenster zu machen (siehe mein calc() oben) und dann den Platz im Body per Grid-Layout aufzuteilen.

IM MOMENT ist es so, dass Dein Body zwei Kind-Elemente hat: die Überschrift h1 und der Scrollcontainer für die Tabelle. Mit

body {
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: auto 1fr;
}

machst Du das body-Element zum Grid, und seine direkten Kind-Elemente zu den Grid-Items. Mit grid-template-columns: 1fr; gibst Du an, dass das Grid eine Spalte hat, die 1/1 der Breite (also alles) hat. Mit grid-template-rows gibst Du an, dass das Grid zwei Zeilen hat. Die erste Zeile soll automatische Höhe haben (also so viel wie nötig), die zweite Zeile soll 1/1 vom Rest (also alles) bekommen. Wie diese fr Angaben funktionieren, findest Du in der Einführung zum Grid.

Du hast damit ein Grid mit zwei Zellen. Wenn Du nichts besonderes angibst, verteilt der Browser die Kind-Elemente des Grids automatisch in diese Zellen, so dass die h1 Überschrift in Zeile 1 und der Scrollcontainer in Zeile 2 landet.

Durch die auto-Angabe wird Zeile 1 so hoch wie die Überschrift benötigt. Zeile 1 hat 1fr und damit den Rest der Höhe.

Wenn die Seite jetzt weitere Inhalte bekommt, muss das Grid ggf. angepasst werden. Oder Du musst, wie ich schon schrub, die Höhe des Scrollcontainers limitieren und den body weiterhin scrollbar machen. Was für Dich passt, hängt von dem zukünftigen Seiteninhalt ab. Das kann ich jetzt nicht als Universalreferat aufschreiben, das führt zu weit und verwirrt Dich mehr, als dass es hilft.

Rolf