Spesso si rende necessario dover includere tabelle all'interno delle nostre pagine web per mostrare, ad esempio, un elenco di dati formattati in modo che siano facilmente consultabili.
L'effetto tipico delle tabelle, quando visualizzate con mobile device, è tutt'altro che ottimale: spesso una tabella obbliga l'utente a eseguire uno scrolling in orizzontale, rendendo la user experience meno vincente.
Un approccio ottimale, in tal senso, è quello di utilizzare le media queries di CSS, di cui abbiamo già parlato in precedenza.
Prendiamo questa tabella come esempio, in cui abbiamo limitato il numero di colonne a 3 per questione di semplicità:
<table class="responsive"> <thead> <tr> <th>Numero ordine</th> <th>Data</th> <th>Totale</th> </tr> </thead> <tbody> <tr> <td>2187121</td> <td>20/01/2014</td> <td>353,21</td> </tr> <tr> <td>2187120</td> <td>18/01/2014</td> <td>3151,00</td> </tr> <tr> <td>2187128</td> <td>17/01/2014</td> <td>278,00</td> </tr> </tbody> </table>
Questa tabella sarebbe visualizzata in questo modo all'interno di un browser:
Applicando questo CSS, invece, potremo ottenere un effetto responsive molto interessante:
table.responsive { width: 100%; background: #f0f0f0; } @media all and (max-width: 768px) { table.responsive { width: 100%; } .responsive thead tr { display: none; } .responsive tbody tr { clear: both; display: block; border: 1px solid #c0c0c0; padding-bottom: 10px; } .responsive td { display: block; padding: 4px; position: relative; padding-left: 40%; } .responsive td:before { clear: both; position: absolute; top: 4px; /* deve essere come il padding del td */ left: 4px; /* deve essere come il padding del td */ width: 35%; padding-right: 10px; white-space: nowrap; } /* riportiamo le header in linea attraverso i CSS */ .responsive td:nth-of-type(1):before { content: "Numero ordine"; } .responsive td:nth-of-type(2):before { content: "Data"; } .responsive td:nth-of-type(3):before { content: "Totale"; } }
Ecco il risultato:
Il punto interessante è che trasformiamo le celle, facendo in modo che vengano visualizzate in verticale, anzichè in orizzontale, come avverrebbe normalmente, per poi applicare, attraverso un po' di CSS, uno stile particolare, che ci consente di inserire del contenuto in linea, andando a riportare le header a fianco del valore. L'effetto è che allungheremo un po' la pagina, mostrando anche informazioni ripetitive, ma non dovremo alterare il markup, usufruendo della tabella in mobilità nella maniera migliore possibile.
Questa tecnica funziona con tutti i browser recenti, mentre non è in grado di funzionare con IE9, che però non è in genere utilizzato in scenari di mobilità.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Short-circuiting della Pipeline in ASP.NET Core
Eseguire attività pianificate con Azure Container Jobs
Miglioramenti nell'accessibilità con Angular CDK
Effettuare il download di un file via FTP con la libreria FluentFTP di .NET
Code scanning e advanced security con Azure DevOps
Miglioramenti agli screen reader e al contrasto in Angular
Creare gruppi di client per Event Grid MQTT
Utilizzare le Cache API di JavaScript per salvare elementi nella cache del browser
Gestire domini wildcard in Azure Container Apps
Reactive form tipizzati con FormBuilder in Angular
Monitorare i server on-premises con Azure Arc
Utilizzare la versione generica di EntityTypeConfiguration in Entity Framework Core