How TO - Side-by-Side-Tabellen
Erfahren Sie, wie Sie Side-by-Side-Tabellen mit CSS erstellen.
So platzieren Sie Tabellen nebeneinander
So erstellen Sie Side-by-Side-Tabellen mit der CSS- float
Eigenschaft:
Beispiel
* {
box-sizing: border-box;
}
/* Create a two-column
layout */
.column {
float: left;
width: 50%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
So erstellen Sie Side-by-Side-Tabellen mit der CSS- flex
Eigenschaft:
Beispiel
* {
box-sizing: border-box;
}
.row {
display: flex;
}
.column {
flex: 50%;
padding: 5px;
}
Hinweis: Flexbox wird in Internet Explorer 10 und früheren Versionen nicht unterstützt. Es liegt an Ihnen, ob Sie Schwimmer oder Flex verwenden möchten. Wenn Sie jedoch Unterstützung für IE10 und niedriger benötigen, sollten Sie Float verwenden.
Tipp: Um mehr über das Flexible-Box-Layout-Modul zu erfahren, lesen Sie unser CSS-Flexbox-Kapitel .
Reaktionsfähigkeit hinzufügen
Das obige Beispiel sieht auf einem Mobilgerät nicht gut aus, da zwei Spalten zu viel Platz auf der Seite beanspruchen. Um eine responsive Tabelle zu erstellen, die auf Mobilgeräten von einem zweispaltigen Layout zu einem Layout in voller Breite wechseln sollte, fügen Sie die folgenden Medienabfragen hinzu:
Beispiel
/* Responsive layout - makes the two columns stack on top of each other
instead of next to each other on screens that are smaller than 600 px */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
Tipp: Gehen Sie zu unserem CSS-Tabellen-Tutorial , um mehr über das Gestalten von Tabellen zu erfahren.
Tipp: Besuchen Sie unser CSS-Float-Tutorial , um mehr über die Float-Eigenschaft zu erfahren.
Tipp: Besuchen Sie unser CSS-Flexbox-Tutorial , um mehr über die Flex-Eigenschaft zu erfahren.