Cómo crear: tablas alineadas

Cómo alinear la tabla

Cómo usar CSS float Atributos para crear una tabla alineada:

Ejemplo

* {
  box-sizing: border-box;
}
/* Crear un diseño de dos columnas */
.column {
  float: left;
  width: 50%;
  padding: 5px;
}
/* Clearfix (eliminar flotación) */
.row::after {
  content: "";
  clear: both;
  display: table;
}

Prueba personalmente

Cómo usar CSS flex Atributos para crear una tabla alineada:

Ejemplo

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

Prueba personalmente

Nota:Flexbox no es compatible con Internet Explorer 10 y versiones anteriores. ¿Usarás float o flex depende de ti. Pero, si necesitas soporte para IE10 y versiones anteriores, debes usar float.

Consejo:Para obtener más información sobre el módulo de布局 de Flexbox flexible, lea nuestra Tutorial de CSS Flexbox.

Añadir capacidad de respuesta

El ejemplo anterior no se verá demasiado bien en dispositivos móviles, ya que las dos columnas ocuparán demasiado espacio en la página.

Para crear una tabla adaptable, que cambie de diseño de dos columnas a un diseño de ancho completo en dispositivos móviles, agrega la siguiente consulta de medios:

Ejemplo

/* Diseño adaptable - En pantallas con menos de 600 píxeles, hacer que las dos columnas se apilen en lugar de mostrarse al lado */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Prueba personalmente

Páginas relacionadas

Tutoriales:CSS tabla

Tutoriales:CSS flotación

Tutoriales:CSS Flexbox