Como criar: Tabela alinhada

Como alinhar tabelas em paralelo

Como usar CSS float Crie uma tabela alinhada em paralelo:

Exemplo

* {
  box-sizing: border-box;
}
/* Criar layout de duas colunas */
.column {
  float: left;
  width: 50%;
  padding: 5px;
}
/* Clearfix (limpar flutuantes) */
.row::after {
  content: "";
  clear: both;
  display: table;
}

Experimente pessoalmente

Como usar CSS flex Crie uma tabela alinhada em paralelo:

Exemplo

* {
  box-sizing: border-box;
}
.row {
  display: flex;
}
.column {
  flex: 50%;
  padding: 5px;
}

Experimente pessoalmente

Atenção:O Flexbox não é suportado no Internet Explorer 10 e versões anteriores. Use float ou flex Depende de você. Mas, se precisar suportar versões do IE10 ou anteriores, deve usar float.

Dica:Para obter mais informações sobre o módulo de layout de caixa flexível, leia nosso Tutorial de CSS Flexbox.

Adicionar capacidade de resposta

O exemplo acima não ficará tão bonito em dispositivos móveis, pois as duas colunas ocuparão muito espaço na página.

Para criar uma tabela responsiva, que mude de layout de duas colunas para uma largura completa no dispositivo móvel, adicione a seguinte consulta de mídia:

Exemplo

/* Layout responsivo - Em telas com menos de 600 pixels, os dois colunas ficam empilhadas em vez de lado a lado */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Experimente pessoalmente

Páginas relacionadas

Tutorial:CSS tabela

Tutorial:CSS flutuante

Tutorial:CSS Flexbox