How TO - Side-by-side tabellen
Leer hoe u zij-aan-zij-tabellen maakt met CSS.
Tafels naast elkaar plaatsen
Side-by-side tabellen maken met de CSS- float
eigenschap:
Voorbeeld
* {
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;
}
Side-by-side tabellen maken met de CSS- flex
eigenschap:
Voorbeeld
* {
box-sizing: border-box;
}
.row {
display: flex;
}
.column {
flex: 50%;
padding: 5px;
}
Let op: Flexbox wordt niet ondersteund in Internet Explorer 10 en eerdere versies. Het is aan jou of je floats of flex wilt gebruiken. Als u echter ondersteuning nodig heeft voor IE10 en lager, moet u float gebruiken.
Tip: Lees ons CSS Flexbox-hoofdstuk voor meer informatie over de Flexible Box Layout Module .
Reactie toevoegen
Het bovenstaande voorbeeld ziet er niet goed uit op een mobiel apparaat, omdat twee kolommen te veel ruimte op de pagina in beslag nemen. Om een responsieve tabel te maken, die moet gaan van een lay-out met twee kolommen naar een lay-out over de volledige breedte op mobiele apparaten, voegt u de volgende mediaquery's toe:
Voorbeeld
/* 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%;
}
}
Tip: ga naar onze zelfstudie CSS-tabellen voor meer informatie over het opmaken van tabellen.
Tip: Ga naar onze CSS Float-zelfstudie voor meer informatie over de float-eigenschap.
Tip: Ga naar onze CSS Flexbox Tutorial voor meer informatie over de flex eigenschap.