Como fazer - Tabelas lado a lado
Aprenda a criar tabelas lado a lado com CSS.
Como colocar tabelas lado a lado
Como criar tabelas lado a lado com a float
propriedade CSS:
Exemplo
* {
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;
}
Como criar tabelas lado a lado com a flex
propriedade CSS:
Exemplo
* {
box-sizing: border-box;
}
.row {
display: flex;
}
.column {
flex: 50%;
padding: 5px;
}
Observação: o Flexbox não é compatível com o Internet Explorer 10 e versões anteriores. Cabe a você se você quiser usar floats ou flex. No entanto, se você precisar de suporte para IE10 e down, você deve usar float.
Dica: Para saber mais sobre o Módulo de Layout de Caixa Flexível, leia nosso capítulo CSS Flexbox .
Adicionar capacidade de resposta
O exemplo acima não ficará bem em um dispositivo móvel, pois duas colunas ocuparão muito espaço da página. Para criar uma tabela responsiva, que deve passar de um layout de duas colunas para um layout de largura total em dispositivos móveis, adicione as seguintes consultas de mídia:
Exemplo
/* 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%;
}
}
Dica: Acesse nosso Tutorial de tabelas CSS para saber mais sobre como estilizar tabelas.
Dica: Acesse nosso tutorial CSS Float para saber mais sobre a propriedade float.
Dica: Acesse nosso Tutorial CSS Flexbox para saber mais sobre a propriedade flex.