Tables Responsive
responsive design est utile lorsque vous voulez que le contenu de votre page Web mobile pour répondre à l'appareil de l'utilisateur, telles que sa taille de l'écran et de l'orientation.
Avec un nom de classe simple, jQuery Mobile est conscient de disponible taille de l'écran de l'utilisateur et se redimensionne pour afficher le contenu qui est pertinent pour cet utilisateur particulier automatiquement.
tables Responsive nous permettent d'afficher un grand ensemble de données tabulaires qui se penchera attrayant pour les mobiles et les ordinateurs de bureau.
Il existe deux types de tables sensibles: refusion et de la colonne bascule.
refusion Table
Le mode de refusion positionne les données de la table à l'horizontale jusqu'à ce qu'il atteigne une taille minimale, toutes les lignes sont groupées verticalement.
Créer une table, ajouter les données-role = "table" et une classe de "ui-responsive" sur le <table> élément:
Pour la table réactive fonctionne correctement, vous devez inclure les <thead> et <tbody> éléments.
Ne pas utiliser rowspan ou attributs colspan; ils ne sont pas pris en charge dans des tableaux sensibles.
Colonne Activer Table
Le mode "toggle colonne" permet de masquer les colonnes quand il n'y a pas assez de largeur pour afficher les données.
Pour créer une table colonne à bascule, ajouter ce qui suit à la <table> élément:
<table data-role="table"
data-mode="columntoggle" class="ui-responsive"
id="myTable" >Par défaut, jQuery Mobile permet de masquer les colonnes du côté droit de la table. Cependant, vous êtes autorisé à spécifier quelle colonne qui doit être caché ou montré dans un ordre spécifique. Ajoutez l'attribut de données la priorité à l' en- tête de la table (<th>) et de spécifier un nombre compris entre 1 ( la plus haute priorité) à 6 (priorité la plus faible):
<th>I
will never be hidden</th>
<th data-priority="1" >I
am very important - I will probably not be hidden</th>
<th data-priority="3" >I
am less important - I could be hidden</th>
<th
data-priority="5" >I am not that important - there is a good
chance that I will be hidden</th>Si vous ne spécifiez pas une priorité pour une colonne, la colonne sera persistant et non disponible pour se cacher.
Mettez tout cela ensemble et vous avez créé une table colonne à bascule! Notez que le cadre ajoute automatiquement un bouton dans le coin en haut à droite de la table. Ceci permet à l'utilisateur de choisir la colonne à afficher dans le tableau:
Exemple
<table data-role="table"
data-mode="columntoggle" class="ui-responsive"
id="myTable" >
<thead>
<tr>
<th
data-priority="6" >CustomerID</th>
<th>CustomerName</th>
<th data-priority="1" >ContactName</th>
<th data-priority="2" >Address</th>
<th
data-priority="3" >City</th>
<th
data-priority="4" >PostalCode</th>
<th
data-priority="5" >Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Alfreds
Futterkiste</td>
<td>Maria Anders</td>
<td>Obere Str. 57</td>
<td>Berlin</td>
<td>12209</td>
<td>Germany</td>
</tr>
</tbody>
</table>
Essayez - le vous - même » Pour modifier le texte du bouton de table à bascule, utilisez l'attribut data-colonne-btn-texte:
Exemple
<table data-role="table"
data-mode="columntoggle" class="ui-responsive"
data-column-btn-text="Click me to hide or show columns!"
id="myTable"> Essayez - le vous - même » Tables coiffants
Utilisez la classe "ui-shadow" pour ajouter des ombres au tableau:
Ajouter une ombre
<table data-role="table"
data-mode="columntoggle" class="ui-responsive ui-shadow"
id="myTable">
Essayez - le vous - même » Pour plus de table de style, utilisez CSS:
Ajouter une bordure inférieure à toutes les lignes de la table
<style>
tr {
border-bottom: 1px solid #d6d6d6;
}
</style>
Essayez - le vous - même » Ajouter une bordure inférieure à tous <th> éléments et une couleur d'arrière-plan à toutes les lignes même de table
<style>
th {
border-bottom: 1px solid
#d6d6d6;
}
tr:nth-child(even) {
background: #e9e9e9;
}
</style>
Essayez - le vous - même »