Узнать, как создать параллельные таблицы используя HTML, CSS.
Как создать таблицы бок о бок
Как создать таблицы рядом с помощью свойства CSS float:
* {
box-sizing: border-box;
}
/* Создание двухколоночного
макета */
.column {
float: left;
ширина: 50%;
padding: 5px;
}
/* Clearfix (очистить float) */
.row::after {
content: "";
clear: both;
display: table;
}
Попробуйте сами »
Как создать параллельные таблицы с помощью свойства CSS flex:
* {
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.
Добавить адаптивность
Пример выше не будет хорошо выглядеть на мобильном устройстве, так как два столбца займут слишком много места на странице. Чтобы создать адаптивную таблицу, которая должна перейти от макета с двумя столбцами к макету во всю ширину на мобильных устройствах, добавьте следующие медиа-запросы:
/* Адаптивный макет — размещает два столбца друг над другом, а не рядом друг с другом на экранах размером менее 600 пикселей */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
Попробуйте сами »
Совет: перейдите в наш Учебник по таблицам CSS, чтобы узнать больше о стилизации таблиц.
Совет: перейдите в наш Учебник по CSS Float, чтобы узнать больше о свойстве float.
Совет: перейдите в наш Учебник по CSS Flexbox, чтобы узнать больше о свойстве flex.