Home>Guide>Come creare una tabella responsive

Come creare una tabella responsive


Come creare una tabella responsive

Uno degli elementi HTML più difficili da trattare quando si passa dalla visualizzazione desktop a quella mobile è senz’altro la tabella. Si perché generalmente le tabelle potrebbero avere numerose colonne che mal si adattano alla visualizzazione “portrait” degli smartphone.

Ma niente paura: c’è una soluzione!

  • Leggi l'articolo, ti bastano solo 2 minuti, 27 secondi
    Sei di fretta? Scarica il PDF e consultalo quando vuoi!

Un esempio pratico

Immagina di avere una tabella di medie dimensioni, diciamo con cinque colonne, come questa:

<table>
	<thead>
		<tr>
			<th>Header1</th>
			<th>Header2</th>
			<th>Header3</th>
			<th>Header4</th>
			<th>Header5</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>sampledata1.1</td>
			<td>sampledata1.2</td>
			<td>sampledata1.3</td>
			<td>sampledata1.4</td>
			<td>sampledata1.5</td>
		</tr>
		<tr>
			<td>sampledata2.1</td>
			<td>sampledata2.2</td>
			<td>sampledata2.3</td>
			<td>sampledata2.4</td>
			<td>sampledata2.5</td>
		</tr>
		<tr>
			<td>sampledata3.1</td>
			<td>sampledata3.2</td>
			<td>sampledata3.3</td>
			<td>sampledata3.4</td>
			<td>sampledata3.5</td>
		</tr>
		<tr>
			<td>sampledata4.1</td>
			<td>sampledata4.2</td>
			<td>sampledata4.3</td>
			<td>sampledata4.4</td>
			<td>sampledata4.5</td>
		</tr>
		<tr>
			<td>sampledata5.1</td>
			<td>sampledata5.2</td>
			<td>sampledata5.3</td>
			<td>sampledata5.4</td>
			<td>sampledata5.5</td>
		</tr>
	</tbody>
</table>

che darà luogo a:

Come vedi, la tabella si sviluppa in orizzontale e la difficoltà maggiore sarebbe restringere gli stessi dati in uno spazio molto molto più piccolo. Infatti, su uno smartphone la dimensione della viewport in modalità portrait potrebbe arrivare anche a 320px, facendo comparire la barra di scorrimento orizzontale. Una soluzione stilisticamente non proprio gradevole, diciamoci la verità.


La soluzione

Per iniziare, è necessario modificare leggermente il codice HTML della tabella. Nulla di complicato, ti basta aggiungere l’attributo data-title alle colonne che contengono i valori ed inserire al suo interno l’etichetta da assegnare al campo:

<table class="table-fluid">
	<thead>
		<tr>
			<th>Header1</th>
			<th>Header2</th>
			<th>Header3</th>
			<th>Header4</th>
			<th>Header5</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td data-title="Header1">sampledata1.1</td>
			<td data-title="Header2">sampledata1.2</td>
			<td data-title="Header3">sampledata1.3</td>
			<td data-title="Header4">sampledata1.4</td>
			<td data-title="Header5">sampledata1.5</td>
		</tr>
		<tr>
			<td data-title="Header1">sampledata2.1</td>
			<td data-title="Header2">sampledata2.2</td>
			<td data-title="Header3">sampledata2.3</td>
			<td data-title="Header4">sampledata2.4</td>
			<td data-title="Header5">sampledata2.5</td>
		</tr>
		<tr>
			<td data-title="Header1">sampledata3.1</td>
			<td data-title="Header2">sampledata3.2</td>
			<td data-title="Header3">sampledata3.3</td>
			<td data-title="Header4">sampledata3.4</td>
			<td data-title="Header5">sampledata3.5</td>
		</tr>
		<tr>
			<td data-title="Header1">sampledata4.1</td>
			<td data-title="Header2">sampledata4.2</td>
			<td data-title="Header3">sampledata4.3</td>
			<td data-title="Header4">sampledata4.4</td>
			<td data-title="Header5">sampledata4.5</td>
		</tr>
		<tr>
			<td data-title="Header1">sampledata5.1</td>
			<td data-title="Header2">sampledata5.2</td>
			<td data-title="Header3">sampledata5.3</td>
			<td data-title="Header4">sampledata5.4</td>
			<td data-title="Header5">sampledata5.5</td>
		</tr>
	</tbody>
</table>

A questo punto non ci resta che scrivere le regole CSS che permetteranno di rendere la nostra tabella perfettamente responsive sui dispositivi mobile. Per prima cosa, inseriamo il tutto in una media query, così da applicare il nuovo comportamento solamente ai dispositivi con risoluzioni orizzontali sotto i 768px:

@media only screen and (max-width: 768px) {
	…
}

Naturalmente, puoi decidere quale è il breakpoint semplicemente modificando il valore 768px.

Bene, ora non ci resta che applicare le regole CSS necessarie, eccole passo per passo.

STEP 1

Forziamo tutti gli elementi della tabella a comportarsi come un elemento “blocco”, andando a capo ad ogni nuovo elemento:

.table-fluid table, 
.table-fluid thead, 
.table-fluid tbody, 
.table-fluid th, 
.table-fluid td, 
.table-fluid tr { display: block; }

STEP 2

Facciamo in modo che le righe di intestazione della tabella non vengano visualizzate:

.table-fluid thead tr { position: absolute; left: -9999px; top: -9999px; }

STEP 3

Con una semplice regola, spostiamo le colonne contenenti i valori verso destra, facendo in modo che venga occupato il 50% dello spazio di visualizzazione orizzontale disponibile:

.table-fluid tr td { border: none; border-bottom: 1px solid #eee; padding-left: 50%; position: relative; text-align: right; white-space: normal; }

STEP 4

Quest’ultima regola, aggiungiamo uno pseudo-elemento ::before che si posiziona nello spazio restante a sinistra della colonna dei valori e prenderà il suo contenuto dall’attributo data-title corrispondente. Abbiamo così creato le nostre etichette di intestazione!

.table-fluid tr td:before { font-weight: bold; left: 6px; padding-right: 10px; position: absolute; text-align: left; top: 6px; white-space: nowrap; width: 45%; }
.table-fluid tr td:before { content: attr(data-title); }

Il codice completo

Ecco infine il codice completo:

@media only screen and (max-width: 768px) {
	.table-fluid table, 
	.table-fluid thead, 
	.table-fluid tbody, 
	.table-fluid th, 
	.table-fluid td, 
	.table-fluid tr { display: block; }
	.table-fluid thead tr { position: absolute; left: -9999px; top: -9999px; }
	.table-fluid tr th { background: #337ab7; border: 1px solid #337ab7 !important; color: #fff; }
	.table-fluid tr td { border: none; border-bottom: 1px solid #eee; padding-left: 50%; position: relative; text-align: right; white-space: normal; }
	.table-fluid tr td:before { font-weight: bold; left: 6px; padding-right: 10px; position: absolute; text-align: left; top: 6px; white-space: nowrap; width: 45%; }
	.table-fluid tr td:before { content: attr(data-title); }
}

ed il risultato finale:

Bello vero? Non ti resta che personalizzare la tua nuova tabella per adattarla al layout del tuo sito web.



Ti è piaciuto questo articolo? Regalami un click per ripagarmi dello sforzo



Code4Life ti è stato utile? Sostienici con una donazione!

Dona con PayPal

Hai trovato interessante l’articolo? Allora ti consiglio di leggere:

Come inserire il pulsante "Condividi su Telegram" su WordPress

Come inserire il pulsante ‘Condividi su Telegram’ su WordPress


Vuoi aumentare la diffusione delle pagine e degli articoli del tuo WordPress? Ecco un utile guida per inserire il pulsante di condivisione su Telegram, condividere da smartphone non è mai stato così semplice.

Disabilitare il Cron di WordPress

Disabilitare il Cron di WordPress


Ecco un piccolo trucchetto per risparmiare risorse, velocizzare il tuo sito e diminuire i tempi di caricamento delle pagine, migliorando ed ottimizzando il servizio Cron di WordPress.

Oppure cerca tra gli articoli correlati


E tu cosa ne pensi? Condividi la tua opinione e discutiamone insieme
La tua email non sarà resa pubblico o utilizzata per inviarti spam, te lo prometto

Iscrivimi alla newsletter per ricevere news ed aggiornamenti
Utilizziamo piattaforme di terze parti per l’invio di newsletter. (Informativa sulla privacy)
Tienimi aggiornato su questo articolo
Ricevi una email di notifica quando qualcuno scriverà un commento a questo articolo. (Informativa sulla privacy)
Ricorda i miei dati per la prossima volta che scriverò un commento
Il tuo nome e la tua email verranno salvati in un cookie in questo browser. (Informativa sulla privacy)