CSS scrollbar bei overflow-x nur wenn notwendig

lordg2009 · 12. September 2017

Hi,

ich habe auf meiner Seite eine breite Tabelle, die ca. 1300px einnimmt. Damit es mir das Layout auf mobile devices nicht zerhaut, habe ich den umgebenden bootstrap-container mit overflow-x: scroll bestückt. Leider wird mir jetzt in chrome auf dem Desktop eine ausgegraute Scrollbar angezeigt (ausgegraut, weil es breit genug ist), die ich da gar nicht haben will. Gibt es eine möglichkeit, dass diese nur bei Bedarf erscheint?

NullPointer · 12. September 2017

Versuch's mal mit overflow-x: auto.

Snooty · 12. September 2017

Arbeitest du mit Media Queries; dass du also für mobile Geräte ein eigenes CSS benutzt? Dann definiere overflow-x: scroll nur dort. Am Desktop, wo die Seite breit genug ist, lässt du das komplett weg.

lordg2009 · 12. September 2017

NullPointer schrieb:
Versuch's mal mit overflow-x: auto.

overflow-x: auto war das, was ich gesucht habe. media-queries fand ich doof, weil die Tabelle auf unterschiedlichen devices abhängig vom layout unterschiedlich breit ist. Außerdem könnten noch Spalten dazukommen, oder entfallen.

Webentwickler · 14. September 2017

Eine Responsive Website zu entwickeln und Media Queries "doof" zu finden ist irgendwie widersprüchlich

.

Ergänzend zum overflow-x: auto kann (oder sollte) man sich die Tabelle und ihr Aussehen in vielen verschiedenen Bildschirmgrößen anschauen. Je nachdem, was die einzelnen Zellen darstellen, kann es Sinn machen, in Media Queries einzelne min- oder max-widths festzulegen, um das Verhalten des jeweiligen Inhalts besser zu steuern (bspw. Textlänge und -umbrüche, Position von Icons, usw.).

lordg2009 · 19. September 2017

naja,

media-queries sind doch auf eine pixel größe beschränkt. Bei verschiedenen Viewports bekommen aber gleiche objekte auf verschiedenen devices unterschiedliche pixel größen. Ich wollte, dass die scrollbar immer dann auftritt, wenn meine Tabelle den bildschirmbereich überschreitet.

Teisi · 21. September 2017

vielleicht ein klein wenig am thema vorbei, aber mit js kann man auch Tabellen "responsive" machen, zum Beispiel mit:
https://datatables.net/

Suche

CSS scrollbar bei overflow-x nur wenn notwendig

lordg2009

Lt. Commander

NullPointer

Lt. Commander

Snooty

Commodore

lordg2009

Lt. Commander

Webentwickler

Ensign

lordg2009

Lt. Commander

Teisi

Lt. Junior Grade

Ähnliche Themen