Tabelle horizontal scrollen

[Gerhard]

Hallo, anhand eines Beitrags in Selfhtml habe ich eine Tabelle erstellt, die man horizontal scrollen kann. Der Scrollbalken erscheint am Ende der Tabelle. Dies wäre kein Problem bei einer kleinen Tabelle. Wie kann ich aber bei einer Tabelle mit vielen Zeilen erreichen, dass der Scrollbalken jeweils am unteren Screenrand angezeigt wird?

[Rolf B]

Hallo Gerhard,

offenbar hast Du die Tabelle in ein Element eingesetzt, das als Scrollcontainer dient.

Ohne ein solches Element würde nämlich der Scrollbar vom body am underen Bildschirmende sein.

Damit der horizontale Scrollbar des Containers ständig sichtbar ist, muss dein Seitenlayout so sein, dass der Container ständig vollständig sichtbar ist.

Das kann ein Grid-Layout sein, oder einfach eine max-height auf dem Container.

Details lassen sich ohne Kenntnis deines HTML nicht wirklich geben.

Rolf

[Gerhard]

Hallo Rolf, hier das von mir geänderte Beispiel

[Rolf B]

Hallo Gerhard,

ja. Wie gesagt. Du musst das div geeignet in der Höhe limitieren.

Rolf

[Gerhard]

Hallo Rolf,

wenn ich den Scrollbalken am unteren Screenrand haben möchte, müsste ich dann nicht wissen, wie hoch der jeweilige screen (PC, Tablet, Smartphone) ist?

Gruß

Gerhard

[Der Martin]

Hallo,

wenn ich den Scrollbalken am unteren Screenrand haben möchte, müsste ich dann nicht wissen, wie hoch der jeweilige screen (PC, Tablet, Smartphone) ist?

nein, du würdest den Scrollbalken dann einfach dem body- oder html-Element geben.

Oder was heißt geben ... der würde automatisch erscheinen, solange du das nicht aktiv verhinderst, etwa durch feste Breitenangaben oder overflow:hidden.

Einen schönen Tag noch
 Martin

[Gerhard]

Hallo Martin,
dies ist aber doch etwas anderes als das, was Rolf geschrieben hat. Und ein Scrollbalken im Body-oder HTML-Element würde doch nicht nur die Tabelle scrollen.

[Rolf B]

Hallo Gerhard,

Nein, musst du nicht. Der Browser weiß es, und das musst du durch geeignete Einheiten ausnutzen.

Ansatz ist height:100vh (guckst du hier) für den body. Allerdings ist das etwas zu viel weil der body einen margin mitbringt, zumeist 8px. Diesen margin musst du auf 0 setzen und durch ein padding ersetzen, oder von den 100vh abziehen, so:

body {
   margin: 8px;
   height: calc(100vh - 16px);
}

Die Leerzeichen um das minus sind Pflicht!

Dass die 8 doppelt da steht ist unschön, ich will dich jetzt aber nicht auch noch mit custom properties belasten... Rolf

[Gerhard]

Hallo Rolf,

jetzt bin ich völlig verwirrt. Deine erste Aussage war, die Höhe des divs entsprechend anzupassen, jetzt aber die Angabe im body-Element.

Schönen Gruß

Gerhard

[Rolf B]

Hallo Gerhard,

ich kenne deine Seite nicht. Die Folge ist: ich spekuliere über das, was du willst, und wir reden aneinander vorbei.

Wenn die Tabelle nur einen Teil der Seite einnimmt und es okay ist, dass man zur Tabelle hinscrollt und dann ein „Guckloch“ hat, in dem die Tabellendaten horizontal und vertikal gescrollt werden, kannst du auch einfach dem Scrollcontainer der Tabelle ein Höhenlimit geben.

Wenn die Tabelle die Seite dominiert, würde ich es für besser halten, die ganze Seite auf 100% Viewporthöhe zu begrenzen und per Grid Layout aufzuteilen. Das magst du anders sehen.

Rolf

[Gerhard]

Hallo Rolf, ich habe noch keine Eigene Seite. Ich habe ein Beispiel aus selfhtml genommen und die Anzahl der Zeilen vergrößert, Ergebnis

Das gleiche Coding habe ich in eine HTML-Datei gepackt und auch damit getestet.

Gruß

Gerhard

[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

[Gerhard]

Lieber Rolf,

vielen Dank für die Hilfe.

Ich werde erst einmal abtauchen und das jetzige realieren. Wenn ich in der Folge weitere Probleme habe, hoffe ich auf Deine weitere Unterstützung.

Gruß

Gerhard