How TO - Tavoli affiancati
Scopri come creare tabelle affiancate con CSS.
Come posizionare i tavoli affiancati
Come creare tabelle affiancate con la float
proprietà CSS:
Esempio
* {
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;
}
Come creare tabelle affiancate con la flex
proprietà CSS:
Esempio
* {
box-sizing: border-box;
}
.row {
display: flex;
}
.column {
flex: 50%;
padding: 5px;
}
Nota: Flexbox non è supportato in Internet Explorer 10 e versioni precedenti. Sta a te se vuoi usare float o flex. Tuttavia, se hai bisogno del supporto per IE10 e versioni precedenti, dovresti usare float.
Suggerimento: per saperne di più sul modulo di layout della scatola flessibile, leggi il nostro capitolo CSS Flexbox .
Aggiungi reattività
L'esempio sopra non avrà un bell'aspetto su un dispositivo mobile, poiché due colonne occuperanno troppo spazio della pagina. Per creare una tabella reattiva, che dovrebbe passare da un layout a due colonne a un layout a larghezza intera sui dispositivi mobili, aggiungi le seguenti media query:
Esempio
/* 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%;
}
}
Suggerimento: vai al nostro tutorial sulle tabelle CSS per saperne di più su come applicare uno stile alle tabelle.
Suggerimento: vai al nostro tutorial CSS Float per saperne di più sulla proprietà float.
Suggerimento: vai al nostro tutorial CSS Flexbox per saperne di più sulla proprietà flex.