Tabelle mit DIV- bzw. Block-Elementen umsetzen
von Oliver Richter (Kommentare: 2)
Neulich wurde ich gefragt, wie man denn mit DIV-Containern das Verhalten und Aussehen einer Tabellenzeile mit zwei Spalten (inklusive Rahmen) am besten herstellen könnte. Denn legt man zwei DIV-Container nebeneinander (zum Beispiel mit Hilfe von float) so sind diese nur dann gleich hoch, wenn auch deren Inhalte jeweils gleich hoch sind oder aber die beiden Boxen eine feste Höhenangabe erhalten. Da Javascript hier ausgeschlossen bleiben sollte, habe ich folgende Überlegungen angestellt:
Variante 1: DIV-Container mit Hintergrundbild
Die beiden DIV-Elemente liegen in einem sie umschließenden weiteren DIV-Container, der ein Hintergrundbild enthält. Ein dritter DIV-Container mit der Anweisung clear: both; direkt unterhalb der beiden gefloateten DIV-Elemente sorgt für die Wiederherstellung des Layouts und dafür, dass alle 3 DIV-Container ordentlich im DIV-Container angezeigt werden. Die Breiten für die beiden Spalten-Container sind fest definiert, sowie auch die Breite für den Gesamtcontainer. In der Mitte bleibt ein Pixel übrig, in der dann auch das Hintergrundbild erscheint, um den Strich in der Mitte anzuzeigen.
CONTENT
CONTENT
CONTENT
<div style="width: 401px; border: 1px solid black; background: url(/files/gf/img/news/div-as-table-line.png) top left repeat-y;">
<div style="float: left; width: 190px; background: #eeeeee; padding: 5px;">CONTENT</div>
<div style="float: right; width: 190px; background: #dddddd; padding: 5px;">CONTENT<br />CONTENT<br />CONTENT<br />CONTENT</div>
<div style="clear: both;"></div>
</div>Variante 2: ... nur wenn man weiß, welcher der höhere ist...
Naja, so eine richtige Lösung ist es eigentlich nicht. Denn hierbei muss man wissen, welcher von beiden DIV-Containern der höhere ist. Nur dann lässt sich diese reine "Float-Lösung" verwenden.
CONTENT
CONTENT
CONTENT
<div style="width: 402px; border: 1px solid black;">
<div style="float: left; width: 190px; background: #eeeeee; padding: 5px;">CONTENT</div>
<div style="float: right; width: 190px; background: #dddddd; padding: 5px; border-left: 1px solid black;">CONTENT<br />CONTENT<br />CONTENT<br />CONTENT</div>
<div style="clear: both;"></div>
</div>Variante 3: "Float" und "Positionierung"
Hier setze ich nun schon gleich insgesamt fünf DIV-Elemente ein. Drei davon dienen nur Design-Zwecken, daher ist diese Beispiel zwar praktikabel aber semantisch durchaus fragwürdig. Wie auch immer, es ist, grafisch betrachtet, eine reine CSS-Lösung.
CONTENT
CONTENT
CONTENT
<div style="width: 401px; border: 1px solid black; position: relative;">
<div style="float: left; width: 190px; background: #eeeeee; padding: 5px;">CONTENT</div>
<div style="float: right; width: 190px; background: #dddddd; padding: 5px;">CONTENT<br />CONTENT<br />CONTENT<br />CONTENT</div>
<div style=" background: #000000; height: 100%; width: 1px; position: absolute; left: 200px;"></div>
<div style="clear: both;"></div>
</div>Variante 4: Die "moderne" Variante...
Es ist eine reine CSS-Lösung und die wohl beste, sofern eine Abwärtskompatiblität nicht nötig ist. Die DIV-Container werden als Tabellen-Elemente definiert mit der CSS-Eigenschaft display.
Der Inhalt der Spalten kann hier, wie auch in "richtigen Tabellenspalten", mit vertical-align ausgerichtet werden, was sehr praktisch ist. Sie verhalten sich also wie Tabellenspalten. Weiterer Vorteil, beide Spalten haben hier auch stets die gleiche Höhe.
CONTENT
CONTENT
CONTENT
<div style="display: table; border: 1px solid black;">
<div style="display: table-row">
<div style="display: table-cell; width: 190px; background: #eeeeee; padding: 5px; border-right: 1px solid black;">CONTENT</div>
<div style="display: table-cell; width: 190px; background: #dddddd; padding: 5px;">CONTENT<br />CONTENT<br />CONTENT<br />CONTENT</div>
</div>
</div>Sie befinden Sich in der Detailansicht eines Blog-Eintrags.
Um alle Blog-Einträge zu sehen, wechseln Sie bitte zur Nachrichten-Übersicht.
Einen Kommentar schreiben
Kommentar von Natasha |
Hey,
ich hab da mal ne Frage bezüglich einer Spalten übergreifenden Cell. Wie bewerkstellige ich das?
Liebe Grüße
Nata
Antwort von Oliver Richter
Ich weiß nicht genau, was du meinst:
Bei einer zweispaltigen Tabelle lässt sich eine Spalte, die über beide Spalten gehen soll, mit folgenden Code bewerkstelligen:
<td colspan="2">INHALT</td>Also aus:
<tr><td>INHALT</td><td>INHALT</td></tr>wird:
<tr><td colspan="2">INHALT</td><td>INHALT</td></tr>Beste Grüße, Oliver
Kommentar von Hajo Scheefer |
Funktioniert nicht, sobald die Fensterbreite zu schmal ist.
Dann beginnt die zweite Spalte unter der ersten
Antwort von Oliver Richter
Hallo, ja, diese Beispiele sind auch schon über 10 Jahre alt und leider nicht mehr aktuell.
Es gibt z.B. die Möglichkeit, mit Media Queries auf kleine Bildschirme zu reagieren oder andere CSS-Techniken wie CSS-Grids oder Flexboxen einzusetzten oder andere Möglichkeiten.