No more tables come rendere responsive una tabella, segue il filone degli articoli “di come rendere responsive” un oggetto, ne ho parlato per esempio nell’articolo Rendere responsive qualsiasi tipo di video …automaticamente e definitivamente!
Poniamo che voi abbiate una tabella, il bello delle tabelle è che per loro natura sono di tipo adaptive cioè fluide: si adattano di conseguenza alla grandezza dello schermo.
E’ sufficente scrivere nel CSS
table { witdth: 100%; }
ed il gioco è fatto.
Il problema nasce a risoluzioni troppo basse le colonne ad un certo punto per forza di cose sono obbligate a sovrapporsi
Ma non se usi la tecnica No More Tables!
No more tables come rendere responsive una tabella
Ideato da Simon Elvery è una tecnica formidabile progettata da uno che del settore CSS ne mastica ogni mattina a colazione.
Cosa permette?
Osservate la tabella sottostante, fate il resized della pagina, e rimanete a bocca a aperta la grandiosità di “No more tables come rendere responsive una tabella” 🙂
Code | Company | Price | Change | Change % | Open | High | Low | Volume |
---|---|---|---|---|---|---|---|---|
AAC | AUSTRALIAN AGRICULTURAL COMPANY LIMITED. | $1.38 | -0.01 | -0.36% | $1.39 | $1.39 | $1.38 | 9,395 |
AAD | ARDENT LEISURE GROUP | $1.15 | +0.02 | 1.32% | $1.14 | $1.15 | $1.13 | 56,431 |
AAX | AUSENCO LIMITED | $4.00 | -0.04 | -0.99% | $4.01 | $4.05 | $4.00 | 90,641 |
ABC | ADELAIDE BRIGHTON LIMITED | $3.00 | +0.06 | 2.04% | $2.98 | $3.00 | $2.96 | 862,518 |
ABP | ABACUS PROPERTY GROUP | $1.91 | 0.00 | 0.00% | $1.92 | $1.93 | $1.90 | 595,701 |
Questo è il codice CSS che crea la magia 🙂
@media only screen and (max-width: 1200px) { /* Force table to not be like tables anymore */ #no-more-tables table { padding-left:0; padding-right:0; } #no-more-tables table, #no-more-tables thead, #no-more-tables tbody, #no-more-tables th, #no-more-tables td, #no-more-tables tr { display: block; } /* Hide table headers (but not display: none;, for accessibility) */ #no-more-tables thead tr { position: absolute; top: -9999px; left: -9999px; } #no-more-tables tr { border: 1px solid #ccc; } #no-more-tables td { /* Behave like a "row" */ border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 50%; white-space: normal; text-align:left; } #no-more-tables td:before { /* Now like a table header */ position: absolute; /* Top/left values mimic padding */ top: 6px; left: 6px; width: 45%; padding-right: 10px; white-space: nowrap; text-align:left; font-weight: bold; } /* Label the data */ #no-more-tables td:before { content: attr(data-title); } }
Quest’altro è l’HTML della di come deve essere formattata la tabella:
Code Company Price Change Change % Open High Low Volume AAC AUSTRALIAN AGRICULTURAL COMPANY LIMITED. $1.38 -0.01 -0.36% $1.39 $1.39 $1.38 9,395 AAD ARDENT LEISURE GROUP $1.15 +0.02 1.32% $1.14 $1.15 $1.13 56,431 AAX AUSENCO LIMITED $4.00 -0.04 -0.99% $4.01 $4.05 $4.00 90,641 ABC ADELAIDE BRIGHTON LIMITED $3.00 +0.06 2.04% $2.98 $3.00 $2.96 862,518 ABP ABACUS PROPERTY GROUP $1.91 0.00 0.00% $1.92 $1.93 $1.90 595,701
Fonte:
–Bootsnipp
–No More Tables