Lezione #id-jqmobile-2013-0013#
JQuery Mobile effettua automaticamente il Reflow delle tabelle. Il Reflow o “riflusso” della tabella si ha quando la larghezza del nostro dispositivo è troppo piccola per contenere tutte le colonne della tabella. JQuery Mobile riorganizzerà i dati della tabella su una colonna singola per favorierne la leggibilità.
Prima vedi il codice in azione! >
Poi vedi il codice, da notare:
Al tag table assegnare data-role=”table” e data-mode=”reflow”
Utilizzare class=”ui-responsive table-stroke” per utilizzare il breakpoint di default di 560px (35em)
Assegnare thead e tbody
<table data-role="table" id="movie-table" data-mode="reflow" class="ui-responsive table-stroke"> <thead> <tr> <th data-priority="1">Rank</th> <th data-priority="persist">Movie Title</th> <th data-priority="2">Year</th> <th data-priority="3"><abbr title="Rotten Tomato Rating">Rating</abbr></th> <th data-priority="4">Reviews</th> </tr> </thead> <tbody> <tr> <th>1</th> <td><a href="http://en.wikipedia.org/wiki/Citizen_Kane" data-rel="external">Citizen Kane</a></td> <td>1941</td> <td>100%</td> <td>74</td> </tr> <tr> <th>2</th> <td><a href="http://en.wikipedia.org/wiki/Casablanca_(film)" data-rel="external">Casablanca</a></td> <td>1942</td> <td>97%</td> <td>64</td> </tr> <tr> <th>3</th> <td><a href="http://en.wikipedia.org/wiki/The_Godfather" data-rel="external">The Godfather</a></td> <td>1972</td> <td>97%</td> <td>87</td> </tr> <tr> <th>4</th> <td><a href="http://en.wikipedia.org/wiki/Gone_with_the_Wind_(film)" data-rel="external">Gone with the Wind</a></td> <td>1939</td> <td>96%</td> <td>87</td> </tr> <tr> <th>5</th> <td><a href="http://en.wikipedia.org/wiki/Lawrence_of_Arabia_(film)" data-rel="external">Lawrence of Arabia</a></td> <td>1962</td> <td>94%</td> <td>87</td> </tr> <tr> <th>6</th> <td><a href="http://en.wikipedia.org/wiki/Dr._Strangelove" data-rel="external">Dr. Strangelove Or How I Learned to Stop Worrying and Love the Bomb</a></td> <td>1964</td> <td>92%</td> <td>74</td> </tr> <tr> <th>7</th> <td><a href="http://en.wikipedia.org/wiki/The_Graduate" data-rel="external">The Graduate</a></td> <td>1967</td> <td>91%</td> <td>122</td> </tr> <tr> <th>8</th> <td><a href="http://en.wikipedia.org/wiki/The_Wizard_of_Oz_(1939_film)" data-rel="external">The Wizard of Oz</a></td> <td>1939</td> <td>90%</td> <td>72</td> </tr> <tr> <th>9</th> <td><a href="http://en.wikipedia.org/wiki/Singin%27_in_the_Rain" data-rel="external">Singin' in the Rain</a></td> <td>1952</td> <td>89%</td> <td>85</td> </tr> <tr> <th>10</th> <td class="title"><a href="http://en.wikipedia.org/wiki/Inception" data-rel="external">Inception</a></td> <td>2010</td> <td>84%</td> <td>78</td> </tr> </tbody> </table>
Se vogliamo personalizzare il reflow aggiungiamo una regola CSS, ad esempio con breakpoint 40em (640px):
@media ( min-width: 40em ) { /* Show the table header rows and set all cells to display: table-cell */ .my-custom-breakpoint td, .my-custom-breakpoint th, .my-custom-breakpoint tbody th, .my-custom-breakpoint tbody td, .my-custom-breakpoint thead td, .my-custom-breakpoint thead th { display: table-cell; margin: 0; } /* Hide the labels in each cell */ .my-custom-breakpoint td .ui-table-cell-label, .my-custom-breakpoint th .ui-table-cell-label { display: none; } }