Jak TO - Stoły obok siebie
Dowiedz się, jak tworzyć tabele obok siebie za pomocą CSS.
Jak ustawić stoły obok siebie
Jak tworzyć tabele obok siebie za pomocą float
właściwości CSS:
Przykład
* {
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;
}
Jak tworzyć tabele obok siebie za pomocą flex
właściwości CSS:
Przykład
* {
box-sizing: border-box;
}
.row {
display: flex;
}
.column {
flex: 50%;
padding: 5px;
}
Uwaga: Flexbox nie jest obsługiwany w przeglądarce Internet Explorer 10 i wcześniejszych wersjach. Od Ciebie zależy, czy chcesz użyć pływaków, czy flexu. Jeśli jednak potrzebujesz wsparcia dla IE10 i niższych, powinieneś użyć float.
Wskazówka: Aby dowiedzieć się więcej o module Flexible Box Layout, przeczytaj nasz rozdział dotyczący CSS Flexbox .
Dodaj responsywność
Powyższy przykład nie będzie dobrze wyglądał na urządzeniu mobilnym, ponieważ dwie kolumny zajmą zbyt dużo miejsca na stronie. Aby utworzyć responsywną tabelę, która powinna przejść z układu dwukolumnowego do układu o pełnej szerokości na urządzeniach mobilnych, dodaj następujące zapytania o media:
Przykład
/* 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%;
}
}
Wskazówka: przejdź do naszego samouczka dotyczącego tabel CSS , aby dowiedzieć się więcej o stylizacji tabel.
Wskazówka: przejdź do naszego samouczka CSS Float , aby dowiedzieć się więcej o właściwości float.
Wskazówka: przejdź do naszego samouczka CSS Flexbox , aby dowiedzieć się więcej o właściwości flex.