Skip to content

Come creare tabelle HTML responsive in puro CSS

Come mostrare le tabelle di dati nei dispositivi mobile?
Un problema che tutti si ritrovano a dover affrontare prima o poi. Noi abbiamo analizzato 3 possibilità, i pro e i contro nel tentativo di trovare il compromesso migliore.

16.03.18
Tempo di lettura:

Dopo anni dedicati allo sviluppo (di siti web), siamo ormai consapevoli che i fattori da tenere in considerazione e su cui ci scontriamo ogni volta sono in costante aumento e si accumulano uno sull’altro; basti pensare al fatto che al giorno d’oggi un sito DEVE essere:
veloce, user-friendly, accessibile, possibilimente emozionale, rispettoso delle norme, innovativo, coerente, e tralasciando per quest’articolo le questioni SEO e Statistiche, dev’essere ovviamente responsive.

Per cercare di attutire il più possibile l’impatto con tali fattori, come azienda abbiamo deciso di investire molto tempo nell’automatizzazione dei processi necessari per raggiungere gli standard sopracitati, evitare di ripetersi quindi è fondamentale per essere competitivi e oggi vi vogliamo parlare di un problema che ci siamo ritrovati più volte a dover affrontare: l’utilizzo delle tabelle.

Immaginiamo di dover inserire una tabella a 7 colonne: per desktop nessun problema, utilizzando l’apposito tag <table> le righe e le celle si espandono per tutto lo spazio che hanno a disposizione, ma cosa accade per risoluzioni inferiori? Niente.
Proprio così, arriva il punto in cui il contenuto non ha più spazio e i dati nella tabella risultano illeggibili, come mostrarli al meglio quindi?

Le 3 principali soluzioni che ci sono venute in mente e che abbiamo analizzato:

Riscrivere la tabella utilizzando i <div>;

Scrivere degli accordion aventi per testata il soggetto, e per contenuto i relativi dati;

Trasformare le righe della tabella in cards;

1. Tabella composta da <div>

L’idea di base era replicare il comportamento nativo dei tag <table><thead><tbody>  <tr><td> applicando ai <div> la proprietà CSS display, e assegnandogli come valore table oppure flex.
Abbiamo deciso di escludere a priori l’utilizzo di display: grid; in quanto sebbene già supportato dai principali browser come vi accennavamo nell’articolo dedicato al CSS Day 2017, riteniamo sia ancora troppo presto per poterlo usare in produzione a causa della presenza di questa lista di bug riconosciuti.

Questa soluzione, si rivelò fin da subito una scelta troppo onerosa in termini di tempo in quanto richiede la scrittura di diverse righe di CSS per descrivere il comportamento delle varie celle, senza contare la perdita del significato semantico della parte di codice HTML.

2. Da tabella ad accordion

La seconda soluzione consisteva di adottare la tabella fino all’ultimo breakpoint utile che riuscisse a garantire l’integrità del suo layout (900px), e da li a scendere utilizzare un sistema ad accordion, in cui ad ognuno di questi, sarebbe corrisposto un <tr> della tabella.

Nonostante questo sistema utilizzasse pochissimo spazio di scroll verticale grazie agli accordion collassati (vedi figura A), fummo costretti a scartare anche quest’opzione in vista del fatto che avremmo dovuto creare 2 strutture diverse HTML per mostrare gli stessi dati nella pagina e di nascondere l’una o l’altra in CSS in base al breakpoint stabilito:

Risultato?
Dati duplicati e codice molto, molto più sporco.

3. Da tabella a cards

La terza ed ultima strada, che alla fine abbiamo scelto, aveva come obbiettivo trasformare ogni <tr> della tabella in una card, come? CSS.

Per mostrare le informazioni in maniera più chiara possibile, abbiamo deciso che per ogni dato nella card doveva essere mostrato il suo riferimento: in pratica l’intestazione della tabella doveva essere presente in ogni tr.
Per fare ciò, abbiamo aggiunto ad ogni td della tabella un attributo HTML (aria-label – per tenere in considerazione l’accessibilità) contenente il riferimento desiderato per poi stamparlo in un :before mediante l’utilizzo di attr(), una funzione di CSS2, supportata da tutti i browser più comuni.
Abbiamo poi nascosto il thead della tabella al di sotto del breakpoint precedentemente stabilito.

Sebbene la soluzione possa somigliare sotto certi aspetti alla precedente, in questa la struttura HTML rimane inalterata e si mantiene la semanticità del codice, i dati sono subito visibili senza la necessità di dover interagire con l’elemento.
Potete trovare un Codepen di quest’ultima soluzione per ulteriori approfondimenti:

See the Pen HTML responsive table by Nodopiano (@nodopiano) on CodePen.

Condividi su
  • Le difficoltà nella ricerca di personale
    I fattori che stanno rendendo difficile per le aziende la ricerca di nuovo personale sono…
    leggi tutto
  • Comunicare i valori del bio in modo autentico
    L’esigenza è far comprendere al pubblico quanto impegno e quanta responsabilità ci siano alla base…
    leggi tutto
  • Il metodo Agile all’interno di Nodopiano
    Chi applica e prova l’Agile non torna più indietro. Vuoi sapere come siamo giunti a…
    leggi tutto
  • Web Marketing Festival 2022: il futuro è qui
    Diffusione delle competenze digitali, promozione di temi sociali, innovazione e spettacolo: ecco il nostro WMF!
    leggi tutto
  • GDPR e Nodopiano: (s)piegare le regole
    Il GDPR ha cambiato fortemente il modo di raccogliere e utilizzare i dati degli utenti…
    leggi tutto
  • Come si diventa sviluppatori?
    Cura, semplicità e diffidenza sono i 3 principi da seguire se si vuole diventare sviluppatori
    leggi tutto
  • Chi ha paura della pagina bianca?
    Lo spazio bianco non è un nemico, è l'alleato per rendere un progetto grafico davvero…
    leggi tutto
  • Web 3.0: una rete di opportunità
    Web 3.0, privacy e criptovalute Cosa ci riserva il futuro?
    leggi tutto
  • Top 3 campagne marketing 2021
    Quali sono le campagne che più abbiamo amato nel 2021?
    leggi tutto
  • Trend Graphic Design 2022
    Il 2022 sarà un anno di grande semplicità e minimalismo per il mondo del Graphic…
    leggi tutto
  • Le 4P del Marketing Mix
    “Il marketing mix è la combinazione delle variabili controllabili di marketing che l’impresa impiega al…
    leggi tutto
  • Accessibilità nel web: il nostro impegno
    La web accessibility consente di fornire contenuti e funzionalità fruibili a qualsiasi utente, senza discriminazione
    leggi tutto
  • LaravelDay 2021
    Impressioni e opinioni del Team Sviluppo sul LaravelDay 2021
    leggi tutto
  • Gestione dei progetti in home working
    Nell’ultimo anno abbiamo investito molte energie per strutturare il nostro project management
    leggi tutto
  • Font e caratteri tipografici: una scelta di stile
    Scegliere il font per un progetto è un modo per avvicinarsi al cliente e comunicare…
    leggi tutto
  • PWA vs APP native: tutto quello che devi sapere
    La PWA è il mix ideale tra un'app e un sito web, riunisce le migliori…
    leggi tutto
  • La creazione di una campagna di sensibilizzazione
    Come comunicare un messaggio: dal concept della campagna alla data visualization, passando per i social…
    leggi tutto
  • Rebranding: a cosa ti serve?
    Il tuo brand è riconoscibile tra tutti gli altri? Cosa lo differenzia in maniera inequivocabile…
    leggi tutto
  • Come creare tabelle HTML responsive in puro CSS
    Come mostrare le tabelle di dati nei dispositivi mobile?Un problema che tutti si ritrovano a…
    leggi tutto
  • Perchè NodoPiano?
    Cosa vuol dire nodopiano? O meglio, nodo piano? Ve lo spieghiamo in questo post in…
    leggi tutto
  • Personalizzare gli elenchi numerati con CSS
    Qualche dritta da developer in questo post ad alto contenuto tecnico. Elenchi numerati con CSS:…
    leggi tutto