Tabella responsive con scroll orizzontale

Tabella responsive con scroll orizzontale
Tabella responsive con scroll orizzontale

Prosegue la serie di articoli dedicati alle tecniche per realizzare tabelle che si adattano alle diverse tipologie di media dai quali vengono visualizzate. Oggi è la volta delle tabelle con una barra di scroll orizzontale, dopo aver visto come e .

La tabella in dettaglio

Per chiarire meglio cosa andremo a realizzare, vediamo una immagine:

Dall'immagine qui su riportata si evince che il risultato finale lo si ottiene facendo interagire 4 elementi:

  1. Un container generale (con il bordo rosso)
  2. Una tabella sinistra (con bordo bleu)
  3. Un container interno (con bordo celeste)
  4. Una tabella interna (con bordo verde)

Il codice html

<div class="content">

<table class="table-left">
	<thead>
		<tr><th>HEAD 1</th></tr>
		<tr><th>HEAD 2</th></tr>
		<tr><th>HEAD 3</th></tr>
		<tr><th>HEAD 4</th></tr>
	</thead>
</table><!--/table-left-->

<div class="content-inner">

<table class="table-right">
	<tr>
		<td>Rigo 1</td>
                ..........
	</tr>
.........................
</table><!--/table-right-->

</div><!--/content-inner-->

</div><!--/content-->

Come si può vedere dal codice e dall'immagine postata in alto, l'elemento content, racchiude la tabella sinistra ed il content-inner, entrambi flottanti. La tabella sinistra conterrà le intestazioni per le celle della tabella di destra. In content inner è il "cursore" che sposterà la tabella interna. Su un monitor di dimensioni grandi, la tabella non necessita di alcuno scroll. Se la volessimo vedere su un tablet o smartphone, non perderemmo nessun dato ed il tutto è perfettamente fruibile.

Il codice CSS

.content{
overflow:hidden; 
border:1px solid #ddd;
}

.table-left{float:left;}

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

.table-right{width:100%;}

@media all and (max-width:480px){
.table-left{width:35%;}
.content-inner{width:65%;}
}

@media all and (min-width:481px){
.table-left{width:30%;}
.content-inner{width:70%;}
}

Le ultime dichiarazioni (mediaqueries) servono per far adattare meglio le due tabelle quando sono visualizzate su schermi molto piccoli.

Ed ecco la all'opera.

Se il file viene richiamato da PC, stringere la finestra del browser per vedere la barra di scroll in azione. Richiamando il file da smartphone, la stessa sarà immediatamente visibile.