Comment faire table sensible
J'ai un tableau pour représenter des données dans ma page HTML. J'essaie de rendre cette table aussi sensible. Comment puis-je faire ceci?
Voici le Demo .
Fondamentalement
Une table sensible est simplement une table à 100% de largeur.
Vous pouvez simplement configurer votre table avec ce CSS:
.table { width: 100%; }
Vous pouvez utiliser des requêtes multimédia pour afficher/masquer/manipuler des colonnes en fonction des dimensions de l'écran en ajoutant une classe (ou en ciblant à l'aide de nth-child, etc):
@media screen and (max-width: 320px) {
.hide { display: none; }
}
[~ # ~] html [~ # ~]
<td class="hide">Not important</td>
Des solutions plus avancées
Si vous avez une table contenant beaucoup de données et que vous souhaitez la rendre lisible sur des appareils à petit écran, il existe de nombreuses autres solutions:
- css-tricks.com propose jusqu'à cet article pour le traitement de tables de données volumineuses.
- Zurb a également rencontré ce problème et résol en utilisant javascript.
- Footables est un excellent plugin jQuery qui vous aide également à résoudre ce problème.
- Tel que publié par Elvin Arzumanoğl c'est un très bon liste d'exemples .
Vérifiez les liens ci-dessous pour le tableau sensible:
http://css-tricks.com/responsive-data-tables/
http://zurb.com/playground/responsive-tables
http://zurb.com/playground/projects/responsive-tables/index.html
Si vous voulez contrôler les td/th comme vous pouvez le faire avec des éléments au niveau des blocs et des floats: ce n'est PAS possible. Il n'y a aucun moyen de faire flotter un td au dessus ou en dessous d'un th.
Je recommande le Wordpress Tableau réactif Magic Liquidizer .
Pour rendre la table responsive, vous pouvez créer 100% de chaque "td" et insérer une rubrique associée dans le "td" du mobile (moins la largeur de "768px").
Voir plus:
http://wonderdesigners.com/?p=227