Tabella responsive con scroll verticale e header fissa

Visualizzare sul monitor una tabella con una grande mole di dati non ha mai rappresentato un problema. Se a questo aggiungiamo che la suddetta tabella potrebbe avere centinaia di celle, allora il discorso cambia. Non ultimo, se tale tabella dovesse essere richiamata attraverso un tipo di media quale uno smartphone, in questo caso comincerebbero ad esserci problemi, sopratutto dovuti al fatto di dover effettuare continui scroll sia in verticale che in orizzontale. La soluzione potrebbe essere quella di mostrare a video una tabella con scroll verticale mentre da smartphone, la stessa tabella, si adatta perfettamente alle dimensioni del media.

Composizione della tabella

Il risultato finale sarà identico all'immagine di introduzione del presente articolo. La tabella è composta, in realtà, da tre elementi:

1. una tabella esterna che mostrerà la header (elemento thead) fissa quando si scrollerà verso il basso
2. un elemento div che si occuperà di mostrare la barra di scroll verticale
3. una tabella interna che conterrà i dati nelle celle.

Il codice html della tabella esterna

<table class="table-ext">
  <thead>
        <tr>
            <th>COGNOME</th>
            <th>NOME</th > 
            <th>PROFESSIONE</th>
	  </tr>		
  </thead>

<tbody>
    <tr>	
	<td colspan="3">	
		<div class="divinterno">		
			<table class="table-int">		
				<tr>
				    <td>Cognome1</td>
				    <td>Nome 1</td>
				    <td>Professione 1</td>        
				</tr>	  
                             .....................
			 </table><!--Table-int-->
		</div>
	</td><!--/colspan tabella ext-->	
   </tr>	  
</tbody>
</table><!--/table-ext-->

La tabella esterna (table class="table-ext") nel nostro esempio funge da "contenitore" per gli altri due elementi. Il div class="divinterno" entra in azione quando gli si fa "spazio" con td colspan="3" appartenente alla tabella esterna. All'interno del div viene dichiarata la tabella interna (table class="table-int). Facciamo un passo indietro. Perchè alla tabella esterna contiene il tag td colspan="3"? Perchè gli elementi che vogliamo visualizzare sono 3:

1. Cognome
2. Nome
3. Professione

Tutte le celle con i dati appartengono alla tabella interna. Quando appare la barra di scroll verticale? Quando, attraverso il codice CSS, si imposta un'altezza per il div class="divinterno" ed i contenuti saranno maggiori rispetto all'altezza del div stesso.

Il codice CSS

Il codice CSS è, come si è potuto intuire, molto semplice.

.table-ext {width:90%;}

.table-ext thead th {
height:50px;
line-height:50px;
border-bottom:1px solid #ddd;
text-align: left;
border:1px solid #ddd;
padding: 0 0 0 5px;
background: #f04;
color:#fff;
}

.table-ext tbody td {
border-bottom:1px solid #ddd;
}

.divinterno{
height:270px; 
overflow:auto;
width:100%;
}

.table-int {
width:100%; 
}

.table-int td {
height:40px;
line-height:40px;
}

La dimensione dell'altezza del div class="divinterno", associata alla proprietà overflow: auto, assicurano la completa e comoda consultazione della tabella con lo scroll in verticale. Il file di esempio completo contiene tutto quanto sin qui descritto.

Realizzare la tabella responsive

In qualche articolo precedente è stato trattato l'argomento sulla realizzazione di una tabella responsive. Si veda il procedimento in quanto è perfettamente sovrapponibile all'articolo odierno. Testato e garantito.