Tabella con scroll orizzontale
Tabella con scroll orizzontale
Extrowebsite

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

La tabella in dettaglio

Dall'immagine in alto, si evince che il risultato finale lo si ottiene facendo interagire 4 elementi html:

  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 non è altro che 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 perderemo 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. Il contiene la tabella in oggetto.

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