Ausgabe der Webseite an Bildschirmgröße anpassen

Hallo zusammen,

ich bastel gerade eine sehr simple Webseite, die eigentlich nichts macht außer Daten in einer langen Tabelle anzuzeigen.
Nun möchte ich das Ganze so gestalten, dass man nicht ewig nach unten scrollen muss, sondern die Tabelle wenn möglich automatisch aufgespaltet wird und so den kompletten Platz auf dem Bildschirm verwendet.

Da ich absoluter Anfänger bin was Webprogrammierung angeht, hab ich leider absolut keine Ahnung, wie man sowas anstellen könnte.

Eine sehr einfache Lösung wäre natürlich wünschenswert, da die Webseite selbst eigentlich sehr simpel ist und nur mit html und ein wenig php auskommt.

Ich habe rausgefunden, dass man sowas wohl evtl. schon sehr leicht mit CSS machen könnte:


Das reicht schon aus, um eine lange Tabelle in kleinere Abschnitte aufzuteilen, so dass die Breite des Bildschirms ausgenutzt und nicht mehr nach unten gescrollt werden muss.
Das ist eigentlich schon fast perfekt, allerdings werden die Daten in der Tabelle, die vorher alphabetisch sortiert waren, jetzt anders sortiert, undzwar so dass die Sachen zuerst in der ersten Zeile, dann in der zweiten usw. sortiert sind.
Wünschenswert wäre es aber, dass die Daten in der ersten Spalte bis nach unten alphabetisch sortiert sind und dass das ganze dann in der nächsten Spalte weitergeht.

Wie kann man sowas am einfachsten realisieren? Ist da evtl. Bootstrap was für mich?

Wäre für jede Hilfe dankbar!

Gruß
Zorror

Kuck mal hier: http://css-tricks.com/arranging-elements-top-bottom-instead-left-right-float/

irgendwie macht dein vorhaben für mich wenig sinn. was für daten stellst du denn in deiner tabelle dar? ich würde davon abraten daten welche untereinander dargestellt werden sollten, nebeneinander zu stellen, nur um platz zu sparen. das könnte für verwirrung sorgen. du hast doch sicherlich auch mehrere spalten? vergiss nicht dass es verschiedene auflösungen gibt, da ist auch in der breite schnell schluss. mit einer normalen table bist du da auch recht limitiert. tr's kannst du nicht nebeneinander darstellen.

eine tabelle spannt sich immer nur so breit auf wie inhalt vorhanden ist. wenn du also einfach nur eine volle breite möchtest gib dem table tag width="100%" mit. nimm cellpadding und cellspacing raus, setze die schriftgröße runter und schon rutscht alles etwas zusammen.

ansonsten würde ich vorschlagen wirklich die höhe zu nutzen und den user scrollen zu lassen, ist dann halt so. eine table sollte wirklich nur dafür verwendet werden wofür sie gedacht ist.

soll die seite denn responsive werden, also für mobile geräte optimiert? dann schau mal nach responsive tables, da gibt es techniken und plugins. bootstrap ist schon nicht verkehrt, allerdings zu "mächtig" für kleine vorhaben.

Spontane Idee:

Für 350px was passendes einsetzen und auf Vendor Prefixes achten. Das könnte klappen...

wieviele spalten hat die Tabelle und sind die Daten in sich noch schlüssig wenn man sie nebeneinander darstellt? Wenn ja würde ich folgendes machen.
1. erstelle ein <div id="left"></div>
2. erstelle ein <div id="right"></div>
3. Ind diese <div> schreibst du nun deine Tabelle
4. css: #left{float:left;} #right{float:right;
5. du kannst natürlich in diesen anweisungen auch noch die gestaltung für rahmen etc. unterbringen
6. Wenn du eine Fusszeile hast müsstest du diese mit der Anweisung #footer{clear:both; daruntersetzen.

Hoffe ich konnte helfen