Come creare: tabella accostata

Come creare una tabella accostata

Come usare CSS float Creare una tabella in colonna accostata:

Esempio

* {
  box-sizing: border-box;
}
/* Creare layout a due colonne */
.column {
  float: left;
  width: 50%;
  padding: 5px;
}
/* Clearfix (pulisci flottante) */
.row::after {
  content: "";
  clear: both;
  display: table;
}

Prova personalmente

Come usare CSS flex Creare una tabella in colonna accostata:

Esempio

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

Prova personalmente

Attenzione:Flexbox non è supportato in Internet Explorer 10 e versioni precedenti. Dovresti usare float o flex dipende da te. Tuttavia, se devi supportare IE10 e versioni precedenti, dovresti usare float.

Suggerimento:Per ulteriori informazioni sul modulo di layout Flexible Box, leggi il nostro Tutorial CSS Flexbox.

Aggiungere la capacità di risposta

L'esempio sopra non apparirà molto bello sui dispositivi mobili perché le due colonne occupano troppo spazio nella pagina.

Per creare una tabella responsive, che passi da una layout a due colonne a una layout a piena larghezza sui dispositivi mobili, aggiungi la seguente query media:

Esempio

/* Layout responsive - Su schermi con dimensioni inferiori a 600 pixel, i due colonne si sovrappongono invece di essere affiancate */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Prova personalmente

Pagina relativa

Tutorial:CSS tabella

Tutorial:CSS flottaggio

Tutorial:CSS Flexbox