Cerca articoli della Knowledge Base

Creare Tabelle Responsive in Html5

Creare Tabelle Responsive in HTML5

Con la crescente necessità di siti web adattivi per dispositivi mobili, è essenziale sapere come creare tabelle che si adattino a diverse dimensioni dello schermo. Ecco una guida su come realizzare tabelle responsive in HTML5.

Passo 1: Creare una Tabella di Base Inizia creando una tabella standard usando i tag

, ,
, e .

<table> <thead> <tr> <th>Intestazione 1th> <th>Intestazione 2th> tr> thead> <tbody> <tr> <td>Dato 1td> <td>Dato 2td> tr> tbody> table>

Passo 2: Stilizzare con CSS Utilizza CSS per migliorare l'aspetto della tua tabella.

table { width: 100%; border-collapse: collapse; } th, td { padding: 8px 12px; border: 1px solid #ddd; }

Passo 3: Rendere la Tabella Responsive Il trucco per rendere una tabella responsive è avvolgerla in un div con overflow scrollabile.

<div class="table-responsive"> div>
.table-responsive { overflow-x: auto; }

Questo permetterà agli utenti di scorrere orizzontalmente sulla tabella se la larghezza dello schermo è troppo piccola per visualizzare l'intera tabella.

Passo 4: Adatta per Dispositivi Mobili (Opzionale) Se vuoi un approccio più avanzato per dispositivi mobili, puoi utilizzare le media queries per modificare la visualizzazione della tabella su schermi più piccoli.

@media screen and (max-width: 767px) { table, thead, tbody, th, td, tr { display: block; } thead tr { position: absolute; top: -9999px; left: -9999px; } tr { margin: 0 0 1rem 0; } td { border: none; border-bottom: 1px solid #ddd; position: relative; padding-left: 50%; } td:before { position: absolute; top: 0; left: 6px; width: 45%; padding-right: 10px; white-space: nowrap; } td:nth-of-type(1):before { content: "Intestazione 1"; } td:nth-of-type(2):before { content: "Intestazione 2"; } /* Aggiungi altri secondo il numero di colonne */ }

Con questa media query, la tabella verrà visualizzata come una lista per dispositivi con una larghezza dello schermo inferiore a 767px.

Ecco un esempio di tabella responsive su W3Schools.

Conclusione: Rendere le tabelle responsive può sembrare complesso, ma seguendo questi passaggi, sarai in grado di garantire una presentazione chiara dei tuoi dati su tutti i dispositivi.

Hai trovato utile quest'articolo?

Articoli Correlati