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
Hai trovato interessante l’articolo? Allora ti consiglio di leggere:
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
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.
Buonasera, l'articolo è interessante. Grazie. Vorrei modificare una tabella per renderla responsive. Il codice che ho però è diverso da quello che lei ha inserito come esempio…