Frage Container ab bestimmter Bildschirmbreite horizontal scrollen

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

dabri

Neues Mitglied
25 März 2008
4
0
1
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

Aktives Mitglied
14 Juli 2017
439
52
28
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...
Code:
<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....
HTML:
<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.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.491
295
83
66
Auch nicht wirklich falsch aber nicht zu empfehlen ist die Verwendung von float. Deine Daten sind eindeutig tabellarisch und es würde sich anbieten, zur Darstellung auch eine HTML-Tabelle zu verwenden.
 
Werbung:

Latest posts