Per rendere una tabella reattiva nei CSS, c’è bisogno di utilizzare delle media query per adattare il design della tabella alle diverse dimensioni dello schermo. Ecco un esempio semplice di come farlo:
```
/* Styling base per la tabella: */
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 10px;
border: 1px solid #ddd;
text-align: left;
}
/* Quando lo schermo ha una larghezza massima di 600px, rendi la tabella un layout a blocchi e ogni cella un blocco a se stante: */
@media screen and (max-width: 600px) { table, thead, tbody, th, td, tr { display: block; }
/* Nascondi gli headers della tabella: */ thead tr { position: absolute; top: -9999px; left: -9999px; } /* Ogni cella ha una linea divisoria tranne l’ultima: */ tr { border: 1px solid #ccc; } td { /* Posiziona le celle una sopra l’altra: */ border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 50%; } td:before { /* Creazione di un pseudo-elemento per gli headers: */ position: absolute; /* Allinea il titolo a sinistra con un padding di 10px: */ left: 6px; width: 45%; padding-right: 10px; white-space: nowrap; } } ```Con queste regole CSS, quando lo schermo ha una larghezza massima di 600px, i dati delle celle della tabella verranno visualizzati uno sopra l’altro rendendo la tabella molto più leggibile su dispositivi mobili.
