CSS und Tabellen

conger890

ich möchte eine Anzahl (bis zu 8 Tabellen auf einen mit <div id="mitte" (width=800px, hight= dynamisch)> bezeichnetes Areal legen.
Da die Anzahl der Tabellen (wetterdaten an verschiedenen Orten) variiert, sollte das dynamisch passieren.
Also 1.Tabelle (4 Zeilen icnl. Thead, 6 Spalten, width=350px) links oben, 2.Tabelle (4/6, width=350px) rechts daneben.
Tabelle 3 (4/6 width=350px) unter Tabelle 1 und so weiter bis zu 8 Tabellen.
Wie kann ich das dynamisch mit CSS lösen?
Danke für Eure Mühen
Conger890

wolf

Naja, du musst 'nur' dafür sorgen dass deine Tabelle nicht breiter als 50% ist und dass sie sich links hinter der nächsten anordnet.

Zuerst sorgen wir mal dafür, dass deine Seite in allen Browsern 'gleich' interpretiert wird.. dazu schreibst du an den Anfang von deinem CSS das hier:

CSS

*{
    margin: 0;
    padding: 0;
}

Dann gibst du der Tabelle erst mal 50% breite und sorgst dafür, dass ein padding oder eine border nicht zu diesen 50% gerechnet wird:

CSS

table{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 50%;
}

Jetzt sollen sich die Tabellen hintereinander statt nur untereinander anordnen:

CSS

table{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 50%;
    float: left;
}

Nun brauchen wir noch eine Sperre, die dafür sorgt, dass nach der letzten Tabelle nicht noch weiter hintereinander angeordnet wird.
Nach der letzten Tabelle setzt du das hier ins HTML:

HTML

<hr class="stopFloat">

Und dann noch das hier ins CSS:

CSS

.stopFloat{
    clear: both;
    height: 0px;
    width: 0px;
}

Hoffe das ist soweit verständlich, dass du es verstehst und nicht nur kopierst..

Tipp am Rande:
- Mit festen Breiten Arbeiten ist nicht immer soooo sinnvoll
- Wieso haben deine Tabellen nur 350px statt 400?! benutze dann soweit das dir in Kram passt trotzdem 50% und

CSS

table{
    padding-left: 25px;
    padding-right: 25px;
}

conger890

Danke Wolf,
mit box-sizing habe ich mich noch nicht so richtig beschäftigt, werde das nachholen.
Wenn ich, wie du vorschlägst
table {
box...

width 50%
}
mache, stossen die Tabellen links und rechts dann nicht unmittelbar aneinander?
conger890

wolf

Doch stoßen sie, deswegen ja der nachtrag mit dem padding

Zitat von wolf
- Wieso haben deine Tabellen nur 350px statt 400?! benutze dann soweit das dir in Kram passt trotzdem 50% und
CSS
table{
    padding-left: 25px;
    padding-right: 25px;
}

Dann müsste alles passen

Das box sizing sorgt dafür, dass du paddings und borders für die Tabelle definieren kannst, und die tabelle trotzdem nur 50% breit ist anstatt 50% + padding + border

Jetzt mitmachen!