Quando usare questo esempio
Tabella con intestazione chiara, righe alternate e contenitore scrollabile.
Copialo in una pagina di prova, cambia testi e colori, poi integralo nel tuo progetto solo dopo aver capito il ruolo di ogni classe.
HTML
La struttura HTML resta semantica: usa elementi riconoscibili e attributi utili per l’accessibilità.
<div class="demo-table-wrap">
<table class="demo-table">
<thead><tr><th>Modulo</th><th>Argomento</th><th>Durata</th></tr></thead>
<tbody><tr><td>1</td><td>Selettori</td><td>30 min</td></tr></tbody>
</table>
</div>
CSS commentato
Il CSS punta alla semplicità: poche classi, proprietà leggibili e comportamento responsive prevedibile.
.demo-table-wrap { overflow-x: auto; }
.demo-table { width: 100%; min-width: 520px; border-collapse: collapse; }
.demo-table th,
.demo-table td { padding: 12px; border-bottom: 1px solid #e2e8f0; text-align: left; }
.demo-table th { background: #eaf1ff; color: #1d4ed8; }
Commenti didattici
- Il wrapper gestisce gli schermi piccoli senza schiacciare le colonne.
- `border-collapse` evita doppi bordi antiestetici.
- L’intestazione aiuta a leggere velocemente i dati.
Prova pratica: cambia un solo valore alla volta, per esempio `gap`, `padding` o `border-radius`, e osserva come cambia il componente.
Continua con gli esempi
Apri l’esempio successivo oppure torna alla raccolta completa.