Come rendere responsive una tabella in Bootstrap

Come rendere responsive una tabella in Bootstrap

44
0
CONDIVIDI
Web Hosting


Ti sarà sicuramente capitato di avere a che fare con una tabella il cui codice sorgente è assai semplice, i tag sono un div, un table, un thead e un tbody. Insomma, una tabella standard che contiene tutti questi tag, elementi indispensabili per avere una tabella ad hoc. Vediamo come gestire una tabella responsive in Bootstrap.

Una tabella adaptive

Per creare una tabella adaptive il codice è davvero molto semplice: partendo dal presupposto che l’apstive design è un modello di progettazione grafica tale per cui gli elementi hanno sempre una grandezza che riprende il container, il codice per rendere una tabella adaptive è questo:
[crayon-5912b0c17b200314165827/]
tutto qui 🙂

PRO

Una singola riga di codice CSS!

CONTRO

Hai mai provato a restringere una tabella a grandezza dello schermo a 360px? Vedrai le cose peggiori:

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”KryERV” default_tab=”html,result” user=”sergio_pinna”]See the Pen KryERV by Sergio Pinna (@sergio_pinna) on CodePen.[/codepen_embed]

La tabella responsive

Nel caso del responsive la questione si fa interessante, perché bisogna fare in modo che a grandezza ridotta, sotto gli 800 px circa, si abbia un adeguamento, di tipo responsive, tale per cui le colonne non siano troppo strette, e dunque illeggibili.
Per prima cosa scaricati il file di Bootstrap oppure usa un CDN tipo :
[crayon-5912b0c17b213764835771/]
Questo è il codice HTML da aggiungere
[crayon-5912b0c17b218312097909/]
Questo è il codice CSS:
[crayon-5912b0c17b224721133790/]

Una tabella perfettamente responsive e bootstrappata

Il risultato che ottieni è:

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”wWPREd” default_tab=”html,result” user=”sergio_pinna”]See the Pen No more tables by Sergio Pinna (@sergio_pinna) on CodePen.[/codepen_embed]

La magia del codice sta tutta nell’ultima singola regola CSS:
[crayon-5912b0c17b22a861008207/]
Essa riproduce esattamente, come se fosse il titolo iniziale della tabella, quello contenuto nel th.

E tu quale soluzione preferisci per creare tabelle responsive?

Scrivici nei commenti!

Come rendere responsive una tabella in BootstrapWebhouse.





Source link