2. Exemples
2.7. Tables Responsives
2.7.1. Table Reflow : styles personnalisés
// Fallback in case the browser doesn't fire a load event var fallback = setTimeout(function() {
$( "#popup-" + short ).popup( "open" );
}, 2000);
});
// Set a max-height to make large images shrink to fit the screen.
$( document ).on( "popupbeforeposition", ".ui-popup", function() { // 68px: 2 * 15px for top/bottom tolerance, 38px for the header.
var maxHeight = $( window ).height() - 68 + "px";
$( "img.photo", this ).css( "max-height", maxHeight );
});
// Remove the popup after it has been closed to manage DOM size $( document ).on( "popupafterclose", ".ui-popup", function() { $( this ).remove();
});
});
2.7. Tables Responsives
2.7.1. Table Reflow : styles personnalisés
Styles personnalisés pour la table reflow avec des largeurs qui se réduisent.
<table data-role="table" id="movie-table-custom" data-mode="reflow"
class="movie-list table-stroke">
<thead>
<tr>
<th data-priority="1">Rang</th>
<th style="width:40%">Titre</th>
<th data-priority="2">Année</th>
<th data-priority="3"><abbr title="Classement de Rotten Tomato">Classement</abbr></th>
<th data-priority="4">Commentaires</th>
<th data-priority="4">Réalisateur</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td class="title"><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>
<td>Orson Welles</td>
</tr>
<tr>
<th>2</th>
<td class="title"><a href="http://en.wikipedia.org/wiki/Casablanca_(film)"
data-rel="external">Casablanca</a></td>
<td>1942</td>
<td>97%</td>
<td>64</td>
<td>Michael Curtiz</td>
</tr>
<tr>
<th>3</th>
<td class="title"><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>
<td>Francis Ford Coppola</td>
</tr>
<tr>
<th>4</th>
<td class="title"><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>
<td>Victor Fleming</td>
</tr>
<tr>
<th>5</th>
<td class="title"><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>
<td>Sir David Lean</td>
</tr>
<tr>
<th>6</th>
<td class="title"><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>
<td>Stanley Kubrick</td>
</tr>
<tr>
<th>7</th>
<td class="title"><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>
<td>Mike Nichols</td>
</tr>
<tr>
<th>8</th>
<td class="title"><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>
<td>Victor Fleming</td>
</tr>
<tr>
<th>9</th>
<td class="title"><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>
<td>Stanley Donen, Gene Kelly</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>
<td>Christopher Nolan</td>
</tr>
</tbody>
</table>
code CSS :
/* These apply across all breakpoints because they are outside of a media query
*/
/* Make the labels light gray all caps across the board */
.movie-list thead th,
.movie-list tbody th .ui-table-cell-label, .movie-list tbody td .ui-table-cell-label { text-transform: uppercase;
font-size: .7em;
color: rgba(0,0,0,0.5);
font-weight: normal;
}
/* White bg, large blue text for rank and title */
.movie-list tbody th { font-size: 1.2em;
background-color: #fff;
color: #77bbff;
text-align: center;
}
/* Add a bit of extra left padding for the title */
.movie-list tbody td.title { padding-left: .8em;
}
/* Custom stacked styles for mobile sizes */
/* Use a max-width media query so we don't have to undo these styles */
@media (max-width: 40em) {
/* Negate the margin between sections */
.movie-list tbody th { margin-top: 0;
text-align: left;
}
/* White bg, large blue text for rank and title */
.movie-list tbody th,
.movie-list tbody td.title { display: block;
font-size: 1.2em;
line-height: 110%;
padding: .5em .5em;
background-color: #fff;
color: #77bbff;
-moz-box-shadow: 0 1px 6px rgba(0,0,0,.1);
-webkit-box-shadow: 0 1px 6px rgba(0,0,0,.1);
box-shadow: 0 1px 6px rgba(0,0,0,.1);
}
/* Hide labels for rank and title */
.movie-list tbody th .ui-table-cell-label,
.movie-list tbody td.title .ui-table-cell-label { display: none;
}
/* Position the title next to the rank, pad to the left */
.movie-list tbody td.title { margin-top: -2.1em;
padding-left: 2.2em;
border-bottom: 1px solid rgba(0,0,0,.15);
}
/* Make the data bold */
.movie-list th, .movie-list td {
font-weight: bold;
}
/* Make the label elements a percentage width */
.movie-list td .ui-table-cell-label, .movie-list th .ui-table-cell-label { min-width: 20%;
}
}/* Media query to show as a standard table at wider widths */
@media ( min-width: 40em ) {
/* Show the table header rows */
.movie-list td, .movie-list th,
.movie-list tbody th, .movie-list tbody td, .movie-list thead td, .movie-list thead th { display: table-cell;
margin: 0;
}
/* Hide the labels in each cell */
.movie-list td .ui-table-cell-label, .movie-list th .ui-table-cell-label { display: none;
}
}/* Hack to make IE9 and WP7.5 treat cells like block level elements */
/* Applied in a max-width media query up to the table layout breakpoint so we don't need to negate this */
@media ( max-width: 40em ) { .movie-list td,
.movie-list th { width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
float: left;
clear: left;
} }