Come creare una tabella responsive con No More Tables

Con l’incredibile aumento delle vendite dei dispositivi mobile, quali tablet e smartphone, degli ultimi anni, per un sito web è pressoché fondamentale che si adatti ad ogni dispositivo.

Inoltre dal 21 Aprile 2015, con il cosiddetto MobileGeddon, Google ha deciso di premiare i siti responsive, introducendo il mobile-friendly tra i fattori di ranking che influenzano la SEO di un sito web.

Per questo motivo è di fondamentale importanza che rendere responsive il tuo sito web, per avere un visione ottimale sia su desktop che su mobile.

Per testare se il tuo sito è mobile-friendly, Google ha rilasciato un tool che effettua un’analisi della pagina web e ti avverte se essa è responsive oppure no.

Creare una tabella responsive

Tra gli elementi di minore adattabilità ai dispositivi mobile, ci sono le tabelle che, nonostante si adattino già da sole alla larghezza dello schermo, per risoluzioni troppo basse, come quelle degli smartphone ed in alcuni casi dei tablet, le colonne risultano essere troppe, costringendo a far sì che esse si sovrappongano e che non vengano visualizzate correttamente.

Per risolvere questo fastidioso problema che affligge tutti i web designer, puoi usare la tecnica “No More Tables“.

Il “No More Tables” è una tecnica sviluppata da Chris Coyer per rendere responsive le tabelle trasformando le colonne in righe nei dispositivi con lo schermo ridotto.

Infatti questa tecnica non fa altro che riordinare i dati, trasformando le righe in blocchi disposti su 2 colonne.

Ora ti mostrerò un esempio per farti capire il funzionamento del “No More Tables“.

Ecco il codice Html che deve avere tabella.

 0 
 <div id="no-more-tables"> 
 1 
    <table> 
 2 
       <thead> 
 3 
          <tr> 
 4 
             <th>Città</th> 
 5 
             <th>Regione</th> 
 6 
             <th>CAP</th> 
 7 
             <th>Targa</th> 
 8 
             <th>Abitanti</th> 
 9 
             <th>Densità</th> 
 10 
          </tr> 
 11 
       </thead> 
 12 
       <tbody> 
 13 
          <tr> 
 14 
             <td data-title="Città">Firenze</td> 
 15 
             <td data-title="Regione">Toscana</td> 
 16 
             <td data-title="CAP">da 50121 a 50145</td> 
 17 
             <td data-title="Targa">FI</td> 
 18 
             <td data-title="Abitanti">381.695</td> 
 19 
             <td data-title="Densità">3.730,4 ab./km²</td> 
 20 
          </tr> 
 21 
       </tbody> 
 22 
    </table> 
 23 
 </div> 

Ecco invece il codice Css da implementare, oltre a quello che ti servirà per modificare graficamente la tua tabella.

Naturalmente a seconda della quantità di dati della vostra tabella, valutate voi a quale larghezza effettuare la media query.

 0 
 table { 
 1 
     width: 100%; 
 2 
 } 
 3 
 th, td { 
 4 
     border: 1px solid #c3c3c3; 
 5 
     text-align: center; 
 6 
 } 
 7 
 thead { 
 8 
     background-color: #f5f5f5; 
 9 
 } 
 10 
  
 11 
 /* Media Query per il No More Tables */ 
 12 
  
 13 
 @media only screen and (max-width: 767px) { 
 14 
     /* Forza la tabella a non comportarsi come una normale tabella */ 
 15 
  
 16 
 	#no-more-tables table,  
 17 
 	#no-more-tables thead,  
 18 
 	#no-more-tables tbody,  
 19 
 	#no-more-tables th,  
 20 
 	#no-more-tables td,  
 21 
 	#no-more-tables tr {  
 22 
 		display: block;  
 23 
 	} 
 24 
  
 25 
 	/* Nasconde le intestazioni della tabella */ 
 26 
  
 27 
 	#no-more-tables thead tr {  
 28 
 		position: absolute; 
 29 
 		top:-9999px; 
 30 
 		left:-9999px; 
 31 
 	} 
 32 
   
 33 
 	#no-more-tables tr { border: 1px solid #ccc; } 
 34 
  
 35 
 	#no-more-tables td {  
 36 
 		/* Inserisce il comportamento come una riga */ 
 37 
  
 38 
 		border: none; 
 39 
 		border-bottom: 1px solid #eee;  
 40 
 		position: relative; 
 41 
 		padding-left: 50%;  
 42 
 		white-space: normal; 
 43 
 		text-align:left; 
 44 
 	} 
 45 
  
 46 
 	#no-more-tables td:before {  
 47 
 		/* Inserisce il comportamento come un'intestazione di tabella */ 
 48 
  
 49 
 		position: absolute; 
 50 
 		/* I valori top/left agiscono come padding */ 
 51 
  
 52 
 		top: 0; 
 53 
 		left: 6px; 
 54 
 		width: 45%;  
 55 
 		padding-right: 10px;  
 56 
 		white-space: nowrap; 
 57 
 		text-align:left; 
 58 
 		font-weight: bold; 
 59 
 	} 
 60 
  
 61 
 	/* Aggiunge l'etichetta ai dati della tabella */ 
 62 
  
 63 
 	#no-more-tables td:before { content: attr(data-title); } 
 64 
 } 

E questo sarà il risultato finale.

Se sei da desktop prova a ridurre le dimensioni della tua pagina web per vedere l’effetto ottenuto e verificare che la tabella sia responsive.

Dati sulle città presi da Wikipedia.org in data 4 Ottobre 2015.