CSS tabelle responsive

In questo articolo spiego un sistema molto facile che ho ideato per gestire tabelle, anche di grandi dimensioni, su layout responsive adatti a dispositivi con schermi piccoli come smartphone e tablet.

Un po di tempo fa ho trovato un articolo molto interessante che mostra 3 validi sistemi per gestire le tabelle responsive, questi sistemi però sono abbastanza complessi da implementare, cosi ho pensato un metodo più semplice e funzionale.

HTML
Per prima cosa bisogna aggiungere un “div” subito prima del tag “<table>”, cosi:

<div class="table_wrap">
<table class="table">
...
</table>
<div>

CSS
Poi basta impostare la proprietà CSS “overflow” su “auto”, in questo modo sui dispositivi touch si potrà scorrere la tabella a destra e sisnistra:

.table_wrap { overflow: auto; }

Volendo per fare capire all’utente che si può scorrere la tabella si possono anche aggiungere delle frecce a destra e sinistra.

Per evitare che il testo della tabella vada a capo si può anche aggiungere alla classe “.table” la proprietà “white-space: nowrap;”.

Hai delle idee o dei suggerimenti per migliorare questo articolo? Lascia un commento qui sotto!

Ilario Pellandini

::: Certified Web developer 2006-2018 ::: ::: www.IPELWEB.com :::

More Posts - Website