Cómo HACER - Mesas de lado a lado
Aprenda a crear tablas en paralelo con CSS.
Cómo colocar mesas una al lado de la otra
Cómo crear tablas en paralelo con la float
propiedad CSS:
Ejemplo
* {
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;
}
Cómo crear tablas en paralelo con la flex
propiedad CSS:
Ejemplo
* {
box-sizing: border-box;
}
.row {
display: flex;
}
.column {
flex: 50%;
padding: 5px;
}
Nota: Flexbox no es compatible con Internet Explorer 10 y versiones anteriores. Depende de usted si quiere usar flotadores o flex. Sin embargo, si necesita soporte para IE10 y versiones anteriores, debe usar float.
Sugerencia: para obtener más información sobre el módulo de diseño de caja flexible, lea nuestro capítulo CSS Flexbox .
Agregar capacidad de respuesta
El ejemplo anterior no se verá bien en un dispositivo móvil, ya que dos columnas ocuparán demasiado espacio en la página. Para crear una tabla receptiva, que debe pasar de un diseño de dos columnas a un diseño de ancho completo en dispositivos móviles, agregue las siguientes consultas de medios:
Ejemplo
/* 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%;
}
}
Sugerencia: vaya a nuestro tutorial de tablas CSS para obtener más información sobre cómo diseñar tablas.
Sugerencia: vaya a nuestro tutorial de CSS Float para obtener más información sobre la propiedad float.
Sugerencia: vaya a nuestro tutorial CSS Flexbox para obtener más información sobre la propiedad flex.