Tabella responsive con scorrimento
Tabella leggibile anche su schermi piccoli.
Quando si usa
Per elenchi di dati, calendari, prezzi, risultati o confronti con molte colonne.
Perché si usa
Il contenitore con overflow evita che una tabella larga rompa il layout della pagina.
Vantaggi principali
- Nessun taglio dei dati
- Layout protetto
- Intestazioni facilmente distinguibili
Anteprima del risultato
La tabella resta leggibile anche quando i contenuti sono larghi: il contenitore può scorrere orizzontalmente.
| Voce | Categoria | Stato | Note |
|---|---|---|---|
| Articolo | Web | Attivo | Contenuto pubblicato |
| Guida | Office | Bozza | Da completare |
Codice completo
Puoi copiare il frammento e inserirlo in una pagina di prova. Prima della pubblicazione sostituisci i dati dimostrativi con quelli reali.
<div class="tabella-responsive">
<table>
<caption>Elenco dei corsi</caption>
<thead><tr><th>Corso</th><th>Durata</th><th>Livello</th></tr></thead>
<tbody><tr><td>HTML5</td><td>20 ore</td><td>Base</td></tr></tbody>
</table>
</div>
<style>
.tabella-responsive{overflow-x:auto}
table{width:100%;border-collapse:collapse;min-width:560px}
th,td{padding:11px;border:1px solid #d8e1ec;text-align:left}
th{background:#eef5fc}
</style>Da personalizzare: Aggiorna intestazioni, celle, colori e larghezze. Inserisci una didascalia con caption quando utile.
Errore da evitare: Non usare le tabelle per costruire il layout grafico della pagina.