Hallo zusammen,
ich hänge schon wieder einmal fest, und finde die Lösung nicht.
Ich möchte eine Übersicht mit diversen Angaben in einem div darstellen. Aussehen soll das Ganze im Endeffekt wie eine Tabelle, habe aber gelesen dass man table gar nicht mehr so nutzt?
Mein Ziel wäre, die Daten in diesem div untereinander darzustellen, mit festem Kopf vertikal, da die Daten mehr werden als in dem unten angehangenem Beispiel, also auch nach unten zu scrollen sein werden. Das funktioniert logischerweise standartmäßig.
Mein Problem ist nun, dass die Daten nur bis zum sichtbaren Ende des div´s laufen und dann in der nächsten Zeile weiter gehen.
Das soll so nicht sein, sondern ich möchte nach rechts scrollen um den Rest zu sehen.
Außerdem habe ich offensichtlich ein schlimmes Verständigungsproblem mit float:left, denn so wie ich es jetzt gemacht habe ist es natürlich totaler Käse, da die Daten ja hintereinander weiter laufen, was ja komplett unsinnig ist.
Hier das Beispiel, stark vereinfacht, aber ich hoffe es reicht zur Erklärung was ich vor habe:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<div id='Text'>
<div class='UEberschrift'>
<div class='ZelleKopf'>Bernd:</div>
<div class='ZelleKopf'>Bernd:</div>
<div class='ZelleKopf'>Bernd:</div>
<div class='ZelleKopf'>Bernd:</div>
<div class='ZelleKopf'>Bernd:</div>
<div class='ZelleKopf'>Bernd:</div>
<div class='ZelleKopf'>Bernd:</div>
<div class='ZelleKopf'>Bernd:</div>
<div class='ZelleKopf'>Bernd:</div>
<div class='ZelleKopf'>Bernd:</div>
<div class='ZelleKopf'>Bernd:</div>
<div class='ZelleKopf'>Bernd:</div>
<div class='ZelleKopf'>Bernd:</div>
<div class='ZelleKopf'>Bernd:</div>
<div class='ZelleKopf'>Bernd:</div>
<div class='ZelleKopf'>Bernd:</div>
<div class='ZelleKopf'>Bernd:</div>
<div class='ZelleKopf'>Bernd:</div>
<div class='ZelleKopf'>Bernd:</div>
<div class='ZelleKopf'>Bernd:</div>
<div class='ZelleKopf'>Bernd:</div>
<div class='ZelleKopf'>Bernd:</div>
</div>
<div class='AdresseSpalte'>Straße:
<div class='Adresse'>Musterstraße</div>
<div class='Adresse'>Musterstraße</div>
<div class='Adresse'>Musterstraße</div>
<div class='Adresse'>Musterstraße</div>
<div class='Adresse'>Musterstraße</div>
<div class='Adresse'>Musterstraße</div>
<div class='Adresse'>Musterstraße</div>
<div class='Adresse'>Musterstraße</div>
<div class='Adresse'>Musterstraße</div>
<div class='Adresse'>Musterstraße</div>
<div class='Adresse'>Musterstraße</div>
<div class='Adresse'>Musterstraße</div>
<div class='Adresse'>Musterstraße</div>
<div class='Adresse'>Musterstraße</div>
<div class='Adresse'>Musterstraße</div>
<div class='Adresse'>Musterstraße</div>
<div class='Adresse'>Musterstraße</div>
<div class='Adresse'>Musterstraße</div>
<div class='Adresse'>Musterstraße</div>
<div class='Adresse'>Musterstraße</div>
<div class='Adresse'>Musterstraße</div>
<div class='Adresse'>Musterstraße</div>
</div>
<div class='OrtSpalte'>Ort:
<div class='Ort'>Berlin</div>
<div class='Ort'>Berlin</div>
<div class='Ort'>Berlin</div>
<div class='Ort'>Berlin</div>
<div class='Ort'>Berlin</div>
<div class='Ort'>Berlin</div>
<div class='Ort'>Berlin</div>
<div class='Ort'>Berlin</div>
<div class='Ort'>Berlin</div>
<div class='Ort'>Berlin</div>
<div class='Ort'>Berlin</div>
<div class='Ort'>Berlin</div>
<div class='Ort'>Berlin</div>
<div class='Ort'>Berlin</div>
<div class='Ort'>Berlin</div>
<div class='Ort'>Berlin</div>
<div class='Ort'>Berlin</div>
<div class='Ort'>Berlin</div>
<div class='Ort'>Berlin</div>
<div class='Ort'>Berlin</div>
<div class='Ort'>Berlin</div>
<div class='Ort'>Berlin</div>
</div>
</div>
<style>
#Text{
background-color: #acacd5;
left: 2em;
bottom: 2em;
overflow: scroll;
position: absolute;
right: 2em;
top: 2em;
display:table-cell;
font-size: 5em;
}
.ZelleKopf, .Adresse, .Ort{
float:left;
}
.UEberschrift{
background-color:blue;
}
</style>
</body>
</html>
Alles anzeigen
Eigentlich soll nun quasi 'Bernd' als Überschrift stehen, und darunter die Daten.
Super wäre es wenn die Zeilenbeschriftung ebenfalls fest stehen würde, also nur vertikal aber nicht horizontal scrollen würde, aber da würde ich auch erst einmal weiter selber versuchen etwas zu finden, bzw. dann ein neues Thema erstellen falls ich nicht fündig werde.
Habe auch schon alle Varianten versucht die ich so gefunden habe, allerdings bekomme ich es leider einfach nicht hin.
Hoffe es ist verständlich und das Beispiel ausreichend, wenn nicht würde ich das auch noch einmal neu machen.
Vielen Dank im Voraus, und sollte ich kompletten Mist versuchen, Asche auf mein Haupt, bin noch in der reinen Lernphase.