Как сделать - Столы рядом
Узнайте, как создавать параллельные таблицы с помощью CSS.
Как разместить столы рядом
Как создать параллельные таблицы с помощью float
свойства CSS:
Пример
* {
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;
}
Как создать параллельные таблицы с помощью flex
свойства CSS:
Пример
* {
box-sizing: border-box;
}
.row {
display: flex;
}
.column {
flex: 50%;
padding: 5px;
}
Примечание. Flexbox не поддерживается в Internet Explorer 10 и более ранних версиях. Вам решать, хотите ли вы использовать float или flex. Однако, если вам нужна поддержка IE10 и более ранних версий, вам следует использовать float.
Совет: Чтобы узнать больше о модуле Flexible Box Layout, прочитайте нашу главу CSS Flexbox .
Добавить отзывчивость
Пример выше не будет хорошо смотреться на мобильном устройстве, так как две колонки будут занимать слишком много места на странице. Чтобы создать адаптивную таблицу, которая должна перейти от макета с двумя столбцами к макету полной ширины на мобильных устройствах, добавьте следующие медиа-запросы:
Пример
/* 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%;
}
}
Совет: перейдите к нашему руководству по таблицам CSS , чтобы узнать больше о том, как стилизовать таблицы.
Совет. Перейдите к нашему учебному пособию по CSS Float , чтобы узнать больше о свойстве float.
Совет: перейдите к нашему учебнику по CSS Flexbox , чтобы узнать больше о свойстве flex.