Comment faire de la table responsive

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 .

Fondamentalement

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 

Des solutions plus avancées

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:

  • css-sortingcks.com propose cet article pour gérer de grandes tables de données.
  • Zurb a également rencontré ce problème et l’a résolu en utilisant javascript.
  • Footables est un excellent plugin jQuery qui vous aide également à résoudre ce problème.
  • Tel que posté par Elvin Arzumanoğlu, c’est une excellente liste d’exemples .

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/