Sergio Pinna

Web Designer

no-more-responseive

No more tables come rendere responsive una tabella

No more tables come rendere responsive una tabella, segue il filone degli articoli “di come rendere responsive” un oggetto, ne ho parlato per esempio nell’articolo Rendere responsive qualsiasi tipo di video …automaticamente e definitivamente!

Poniamo che voi abbiate una tabella, il bello delle tabelle è che per loro natura sono di tipo adaptive cioè fluide: si adattano di conseguenza alla grandezza dello schermo.

E’ sufficente scrivere nel CSS

table {
 witdth: 100%;
}

ed il gioco è fatto.

Il problema nasce a risoluzioni troppo basse le colonne ad un certo punto per forza di cose sono obbligate a sovrapporsi

Ma non se usi la tecnica No More Tables!

No more tables come rendere responsive una tabella

Ideato da Simon Elvery è una tecnica formidabile progettata da uno che del settore CSS ne mastica ogni mattina a colazione.

Cosa permette?

Osservate la tabella sottostante, fate il resized della pagina, e rimanete a bocca a aperta la grandiosità di “No more tables come rendere responsive una tabella” 🙂

Code Company Price Change Change % Open High Low Volume
AAC AUSTRALIAN AGRICULTURAL COMPANY LIMITED. $1.38 -0.01 -0.36% $1.39 $1.39 $1.38 9,395
AAD ARDENT LEISURE GROUP $1.15 +0.02 1.32% $1.14 $1.15 $1.13 56,431
AAX AUSENCO LIMITED $4.00 -0.04 -0.99% $4.01 $4.05 $4.00 90,641
ABC ADELAIDE BRIGHTON LIMITED $3.00 +0.06 2.04% $2.98 $3.00 $2.96 862,518
ABP ABACUS PROPERTY GROUP $1.91 0.00 0.00% $1.92 $1.93 $1.90 595,701

Questo è il codice CSS che crea la magia 🙂

@media only screen and (max-width: 1200px) {

    /* Force table to not be like tables anymore */
#no-more-tables table {
padding-left:0;
padding-right:0;
}
 #no-more-tables table, 
 #no-more-tables thead, 
 #no-more-tables tbody, 
 #no-more-tables th, 
 #no-more-tables td, 
 #no-more-tables tr { 
  display: block; 
 }

 /* Hide table headers (but not display: none;, for accessibility) */
 #no-more-tables thead tr { 
  position: absolute;
  top: -9999px;
  left: -9999px;
 }

 #no-more-tables tr { border: 1px solid #ccc; }

 #no-more-tables td { 
  /* Behave  like a "row" */
  border: none;
  border-bottom: 1px solid #eee; 
  position: relative;
  padding-left: 50%; 
  white-space: normal;
  text-align:left;
 }

 #no-more-tables td:before { 
  /* Now like a table header */
  position: absolute;
  /* Top/left values mimic padding */
  top: 6px;
  left: 6px;
  width: 45%; 
  padding-right: 10px; 
  white-space: nowrap;
  text-align:left;
  font-weight: bold;
 }

 /*
 Label the data
 */
 #no-more-tables td:before { content: attr(data-title); }
}

Quest’altro è l’HTML della di come deve essere formattata la tabella:

Code Company Price Change Change % Open High Low Volume
AAC AUSTRALIAN AGRICULTURAL COMPANY LIMITED. $1.38 -0.01 -0.36% $1.39 $1.39 $1.38 9,395
AAD ARDENT LEISURE GROUP $1.15 +0.02 1.32% $1.14 $1.15 $1.13 56,431
AAX AUSENCO LIMITED $4.00 -0.04 -0.99% $4.01 $4.05 $4.00 90,641
ABC ADELAIDE BRIGHTON LIMITED $3.00 +0.06 2.04% $2.98 $3.00 $2.96 862,518
ABP ABACUS PROPERTY GROUP $1.91 0.00 0.00% $1.92 $1.93 $1.90 595,701

Fonte:
Bootsnipp
No More Tables

Condividi questo articolo