J’ai un tableau pour représenter certaines données dans ma page HTML. J’essaie de rendre ce tableau réactif. Comment puis-je faire ceci ?
Voici la Demo
.
Une table sensible est simplement une table de 100% de largeur.
Vous pouvez simplement configurer votre table avec ce CSS:
.table { width: 100%; }
Démo ici
Vous pouvez utiliser des requêtes multimédia pour afficher / masquer / manipuler des colonnes en fonction des dimensions des écrans en ajoutant une classe (ou en ciblant à l’aide de nth-child
, etc.):
@media screen and (max-width: 320px) { .hide { display: none; } }
HTML
Not important
Si vous avez une table avec beaucoup de données et que vous souhaitez la rendre lisible sur les petits appareils, il existe de nombreuses autres solutions:
Consultez les liens ci-dessous pour un tableau réactif:
http://css-sortingcks.com/responsive-data-tables/
http://zurb.com/playground/responsive-tables
http://zurb.com/playground/projects/responsive-tables/index.html
Vous pouvez voir cette démo ou ce bootstrap
Si vous voulez contrôler le td’s / th comme vous pouvez le faire avec les éléments de niveau bloc et les flottants: ce n’est PAS possible. Il n’y a aucun moyen de faire flotter un td sur ou sous un th.
Je recommande le plugin WordPress Magic Liquidizer Responsive Table .
Pour make responsive table, vous pouvez créer 100% de chaque ‘td’ et insérer un en-tête lié dans le ‘td’ sur le mobile (moins la largeur ‘768px’).
Voir plus:
http://wonderdesigners.com/?p=227
Css pure façon de rendre une table entièrement réactive, aucun JavaScript n’est nécessaire. Démonstration de Checke ici Responsive Tables
Responsive Table Name Email Phone Address Contact Mobile Office Home Residency Height Weight Color Desease Extra DOB Nick Name RN Kushwaha [email protected] -- Varanasi - 999999999 022-111111 - India 165cm 58kg bright -- -- 03/07/1986 Aryan
Pour créer un tableau réactif, vous pouvez définir la largeur de chaque td
100% et insérer un en-tête associé dans le td
sur les navigateurs mobiles (d’une largeur inférieure à 768px
).
Voici un site Web qui démontre cette technique: http://www.quizexpo.com/list-of-banks-in-india/