Tabella con scroll orizzontale - responsive - formattata con i CSS

Se per esigenze, al momento non note, dovessimo implementare, in una pagina web, una tabella contenente molte celle, potremmo incorrere nello spiacevole risultato che la visualizzazione potrebbe non essere quella che ci aspetteremmo. I testi andrebbero a capo, facendo aumentare l'altezza delle celle. La soluzione potrebbe essere quella di applicare la barra di scroll, facendola apparire orizzontalmente.

Partendo da un articolo scritto un po' di tempo fa, inerente una tabella scrollabile verticalmente, ed agendo sui CSS, possiamo cercare di ovviare al problema della mole delle celle numerose.

Tabella con scroll orizzontale
Tabella con scroll orizzontale

Come si può vedere nella figura, si ha bisogno di:

Il contenitore generale

Il div esterno, che racchiude gli altri elementi, non necessita di molto codice CSS:

div.content-tabelle 
{
margin:      2em;
text-align:  left;
border:      1px solid #ccc;
overflow:    hidden; 
padding:     15px;
}

La tabella sinistra

Per quanto riguarda la prima tabella, necessita delle sole celle th perchè serve per fare da "intestazione" alle celle della seconda tabella. Il suo codice è:

table.tab-left
{
border-collapse: collapse;
float:           left;
}

table.tab-left th
{
padding:      15px 0;
font-size:    14px;
color:        #f30;
}

table.tab-left tr:nth-of-type(odd)
{
background:   #fff; 
}

table.tab-left tr:nth-of-type(even)
{
background:   #f5f5f5;
}

Nella prima dichiarazione CSS ho assegnato un border-collapse:collapse per annullare i bordi di default dell'elemento table. Inoltre è flottata a sinistra perchè al suo fianco verrà posizionato il div. Per avere un effetto "zebrato", mi sono avvalso del selettore :nth-of-type. odd per le righe dispari, even per le righe pari. Non conoscendo la dimensione del div.content-tabelle, non posso stabilire a priori i pixel esatti. Di conseguenza ho fatto in modo di rendere le due tabelle responsive. Si adatteranno alla dimensione del tipo di media dal quale sarrano richiamate.

@media screen and (max-width:480px)
{
table.tab-left
{
width:    35%;
}
}

@media screen and (min-width:481px)
{
table.tab-left
{
width:    30%;
}
}

Per dimensioni più piccole (fino a 480 pixel), le celle della tabella di sinistra occuperanno un po' più di spazio in quanto potrebbe esserci testo abbastanza lungo. Il tutto viene compensato dalla tabella scrollabile, posta al suo fianco. Come si può vedere dalle mediaqueries dichiarate, fino ad una dimensione di 480 pixel le celle occuperanno il 35% dello spazio a disposizione. Da 481 pixel in su, 30%.Il tutto è stato testato sul monitor del mio pc (wide screen), tablet Samsung e smartphone.

Il div contenitore interno

Allo stesso modo di come è stato creato l'articolo inerente la tabella scrollabile verticalmente, si necessita di un div ausiliario. E' ad esso che viene applicata la proprietà overflow-x:scroll, perchè una tabella, come sappiamo, non può avere tale effetto.

div.content-inner 
{
float:       left;
overflow-x:  scroll; 
}

Dovendo calcolare la dimensione totale con la tabella interna vengono dichiarate, attraverso le mediaqueries, le dimensioni del div ausiliario, fino a raggiungere il 100%:

@media screen and (max-width:480px)
{
div.content-inner 
{
width:   65%;
}
}

@media screen and (min-width:481px)
{
div.content-inner 
{
width:   70%;
}
}

Se per la tabella sinistra, nei media fino a 480 pixel, ho dichiarato 35% come lunghezza totale, il div.content-inner avrà una dimensione pari a 65%. (35% + 65% = 100%). Stesso discorso vale per media con dimensione superiore a 481 pixel: (30% + 70%= 100%).

La tabella destra

Non rimane che formattare, in ultimo, la tabella destra, interna al div.content-inner. Alla stessa stregua di quella sinistra, il suo codice CSS è:

table.tab-right
{
border-collapse:   collapse;
width:             100%;
}

table.tab-right td 
{
font-size:   14px;
text-align:  left; 
white-space: nowrap;
padding:     15px;
}

table.tab-right tr:nth-of-type(odd)
{
background:  #fff; 
}

table.tab-right tr:nth-of-type(even)
{
background:  #f5f5f5;
}

Molto semplice. L'unica cosa alla quale porre attenzione, è la dichiarazione white-space:nowrap per le celle della tabella destra, nelle quali andrà scritto il testo. Se dovesse esserci testo un po' più lungo, evitiamo di farlo andare a capo. La demo di esempio della tabella scrollabile. Come scritto all'inizio dell'articolo, potrebbe essere una soluzione molto comoda e pratica, quando abbiamo a disposizione poco spazio. Se si visualizza la tabella su uno schermo largo, stringere la finestra per vedere lo scorrimento orizzontale.

© www.extrowebsite.com - Grafica, layout, articoli e guide sono di esclusiva proprietà del webmaster - Tutti i diritti riservati