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:
table{
width:100%;
}
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 :
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
Questo è il codice HTML da aggiungere
<table class="col-md-12 table-bordered table-striped table-condensed cf"> <thead class="cf"> <tr> <th>Code</th> <th>Company</th> <th class="numeric">Price</th> <th class="numeric">Change</th> <th class="numeric">Change %</th> <th class="numeric">Open</th> <th class="numeric">High</th> <th class="numeric">Low</th> <th class="numeric">Volume</th> </tr> </thead> <tbody> <tr> <td data-title="Code">AAC</td> <td data-title="Company">AUSTRALIAN AGRICULTURAL COMPANY LIMITED.</td> <td data-title="Price" class="numeric">$1.38</td> <td data-title="Change" class="numeric">-0.01</td> <td data-title="Change %" class="numeric">-0.36%</td> <td data-title="Open" class="numeric">$1.39</td> <td data-title="High" class="numeric">$1.39</td> <td data-title="Low" class="numeric">$1.38</td> <td data-title="Volume" class="numeric">9,395</td> </tr> <tr> <td data-title="Code">AAD</td> <td data-title="Company">ARDENT LEISURE GROUP</td> <td data-title="Price" class="numeric">$1.15</td> <td data-title="Change" class="numeric">+0.02</td> <td data-title="Change %" class="numeric">1.32%</td> <td data-title="Open" class="numeric">$1.14</td> <td data-title="High" class="numeric">$1.15</td> <td data-title="Low" class="numeric">$1.13</td> <td data-title="Volume" class="numeric">56,431</td> </tr> <tr> <td data-title="Code">AAX</td> <td data-title="Company">AUSENCO LIMITED</td> <td data-title="Price" class="numeric">$4.00</td> <td data-title="Change" class="numeric">-0.04</td> <td data-title="Change %" class="numeric">-0.99%</td> <td data-title="Open" class="numeric">$4.01</td> <td data-title="High" class="numeric">$4.05</td> <td data-title="Low" class="numeric">$4.00</td> <td data-title="Volume" class="numeric">90,641</td> </tr> <tr> <td data-title="Code">ABC</td> <td data-title="Company">ADELAIDE BRIGHTON LIMITED</td> <td data-title="Price" class="numeric">$3.00</td> <td data-title="Change" class="numeric">+0.06</td> <td data-title="Change %" class="numeric">2.04%</td> <td data-title="Open" class="numeric">$2.98</td> <td data-title="High" class="numeric">$3.00</td> <td data-title="Low" class="numeric">$2.96</td> <td data-title="Volume" class="numeric">862,518</td> </tr> <tr> <td data-title="Code">ABP</td> <td data-title="Company">ABACUS PROPERTY GROUP</td> <td data-title="Price" class="numeric">$1.91</td> <td data-title="Change" class="numeric">0.00</td> <td data-title="Change %" class="numeric">0.00%</td> <td data-title="Open" class="numeric">$1.92</td> <td data-title="High" class="numeric">$1.93</td> <td data-title="Low" class="numeric">$1.90</td> <td data-title="Volume" class="numeric">595,701</td> </tr> <tr> <td data-title="Code">ABY</td> <td data-title="Company">ADITYA BIRLA MINERALS LIMITED</td> <td data-title="Price" class="numeric">$0.77</td> <td data-title="Change" class="numeric">+0.02</td> <td data-title="Change %" class="numeric">2.00%</td> <td data-title="Open" class="numeric">$0.76</td> <td data-title="High" class="numeric">$0.77</td> <td data-title="Low" class="numeric">$0.76</td> <td data-title="Volume" class="numeric">54,567</td> </tr> <tr> <td data-title="Code">ACR</td> <td data-title="Company">ACRUX LIMITED</td> <td data-title="Price" class="numeric">$3.71</td> <td data-title="Change" class="numeric">+0.01</td> <td data-title="Change %" class="numeric">0.14%</td> <td data-title="Open" class="numeric">$3.70</td> <td data-title="High" class="numeric">$3.72</td> <td data-title="Low" class="numeric">$3.68</td> <td data-title="Volume" class="numeric">191,373</td> </tr> <tr> <td data-title="Code">ADU</td> <td data-title="Company">ADAMUS RESOURCES LIMITED</td> <td data-title="Price" class="numeric">$0.72</td> <td data-title="Change" class="numeric">0.00</td> <td data-title="Change %" class="numeric">0.00%</td> <td data-title="Open" class="numeric">$0.73</td> <td data-title="High" class="numeric">$0.74</td> <td data-title="Low" class="numeric">$0.72</td> <td data-title="Volume" class="numeric">8,602,291</td> </tr> <tr> <td data-title="Code">AGG</td> <td data-title="Company">ANGLOGOLD ASHANTI LIMITED</td> <td data-title="Price" class="numeric">$7.81</td> <td data-title="Change" class="numeric">-0.22</td> <td data-title="Change %" class="numeric">-2.74%</td> <td data-title="Open" class="numeric">$7.82</td> <td data-title="High" class="numeric">$7.82</td> <td data-title="Low" class="numeric">$7.81</td> <td data-title="Volume" class="numeric">148</td> </tr> <tr> <td data-title="Code">AGK</td> <td data-title="Company">AGL ENERGY LIMITED</td> <td data-title="Price" class="numeric">$13.82</td> <td data-title="Change" class="numeric">+0.02</td> <td data-title="Change %" class="numeric">0.14%</td> <td data-title="Open" class="numeric">$13.83</td> <td data-title="High" class="numeric">$13.83</td> <td data-title="Low" class="numeric">$13.67</td> <td data-title="Volume" class="numeric">846,403</td> </tr> <tr> <td data-title="Code">AGO</td> <td data-title="Company">ATLAS IRON LIMITED</td> <td data-title="Price" class="numeric">$3.17</td> <td data-title="Change" class="numeric">-0.02</td> <td data-title="Change %" class="numeric">-0.47%</td> <td data-title="Open" class="numeric">$3.11</td> <td data-title="High" class="numeric">$3.22</td> <td data-title="Low" class="numeric">$3.10</td> <td data-title="Volume" class="numeric">5,416,303</td> </tr> </tbody> </table> </div> </div>
Questo è il codice CSS:
@media only screen and (max-width: 800px) {
/* Force table to not be like tables anymore */
#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); }
}
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:
#no-more-tables td:before { content: attr(data-title); }
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!
