Frage Container ab bestimmter Bildschirmbreite horizontal scrollen

[dabri]

Hallo Zusammen,

zum besseren Verständnis hier erst einmal ein kleines Beispiel der Seite:
https://www.squashboard.de/tmp/scroll.html

Diese Tabelle besteht aus einzelnen div Container mit prozentualen Werten, die sich an Hand der Bildschirmbreite bzw. Breite des Browserfensters dynamisch anpassen.

Ab einer bestimmten Bildschirmbreite werden diese Container dann natürlich etwas zu schmal.

Gibt es eine Möglichkeit, dass diese Tabelle ab einer bestimmten Bildschirmbreite horizontal gescrollt werden können?
Zum Beispiel wenn man diese Seite auf einem Smartphone aufruft.

Freue mich über Eure Hilfe.

Vielen Dank und Gruß

Daniel

 

[Sailor]

Deine Methode, wie du deine Elemente mit den Inline-Styles formatierst ist zwar nicht falsch, aber du solltest besser auf ein zentrales Stylesheet umstellen, in dem du die benötigten CSS Klassen definierst und dann den entsprechenden Elementen diese Klasse(n) zuweist... etwa so.... nur als Beispiel zu verstehen...

<style>
  .ganze_breite {
     width: 100%;
     margin-top: 22px;
     margin-bottom: 20px;
     border: solid 1px #000;
  }
  .zelle {
     float: left;
     height: 13px;
  }
  .schmal {
     width: 6%;
  }
  .mittel {
     width: 9%;
  }
  .breit {
     width: 10%;
  }


</style>

Also genau so eigentlich, wie du es in dem vorhanden Stylesheet schon mit der Schrift und der Farbe gemacht hast.
Im HTML brauchst du dann nur noch die Klassen entsprechend zuordnen....

<div class="ganze_breite">
    <div class="zelle schmal">...</div>
    <div class="zelle mittel">...</div>
    <div class="zelle breit">...</div>
    ...
</div>

Um jetzt dein Problem zu lösen, muss um die ganze Tabelle noch ein zusätzliches <div> existieren (oder nutze dafür das existierende <div id="bsplan">), das du mit min-width: 1000px; ... oder welche Breite eben passt... und width: 100%; formatierst.