Rendre un tableau responsive - Media queries

**Lizzon** · 30/06/2016, 16h58

Bonjour,

J’essaye de rendre un tableau html (simple) responsive pour qu’il puisse être adapté aux mobiles car le rendu actuel ne va pas, la plupart des colonnes sont coupées quand on accède au site sur mobile. J’ai donc utilisé les media queries pour que les colonnes soient agencées les unes après les autres (à la verticale). Pour cela j’ai codé cela dans mon fichier css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
@media (max-width: 600px) {
.entry-content table, tbody { display: block; }
.entry-content tr { display: table; }
.entry-content td { display: table-row; }
}

J’ai essayé d’autres codes un peu similaires :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
@media screen and (max-width: 600px) {
.entry-content table,
.entry-content table tbody,
.entry-content table tr,
.entry-content table td {
  display: block;
}

Mais ça ne marche pas, le tableau reste le même qu’en version desktop. Pourtant lorsque je définis une taille d’écran plus large (max-width : 1280px par exemple) le tableau de la version desktop est bien modifié, avec des colonnes agencées à la verticale.

Que faut-il modifier dans mon code pour que le tableau soit adapté aux mobiles ?

Merci beaucoup !

**JujuPomme** · 01/07/2016, 10h00

Bonjour,

Je te mets des liens vers plusieurs fiddle, pour la simple et bonne raison que c'est pas une propriété en particulier, mais un tout, une structure HTML et le CSS qui va avec.

Essaie de te rapprocher de ces exemples :

- http://jsfiddle.net/secretgspot/eA7hm/
- http://jsfiddle.net/zinoui/tfc0s2mv/
- https://jsfiddle.net/hackedd/ZAPzZ/

En espérant t'aider un peu !

**Lizzon** · 01/07/2016, 10h56

Salut,

Merci bien pour les liens, je vais étudier tout ça !

**Lizzon** · 01/07/2016, 12h14

Bonjour,

Après avoir étudié les liens que tu m'as conseillé, j'ai décidé d'inverser l'orientation de mes tableaux, comme ceci :

A B C D
1 2 3 4
5 6 7 8
=>
A15
B26
C37
D48

et ensuite de figer la première colonne pour que les mobinautes puissent scroller à l'horizontal pour avoir accès aux autres informations en ayant toujours la première colonne à gauche sur leur écran.

Pour la première étape (inverser l'orientation des tableaux) j'ai trouvé deux codes :
http://jsfiddle.net/CsgK9/103/
http://jsfiddle.net/vXS2q/12/
mais ils nécessitent le recours à un code javascript et je ne sais pas où mettre ce code dans mon site (sur quel fichier, à quel emplacement...).

Où dois-je ajouter ce code javascript ?

Merci d'avance !

**JujuPomme** · 01/07/2016, 12h24

J'ai du louper quelque chose...

Les codes javascript qui sont dans ces fiddles, servent à renverser de manière dynamique (quand tu intéragis avec un lien, un bouton) le tableau.

Sauf que toi, tu veux un tableau responsive. Tu peux très bien laisser ton tableau en ligne, et à partir d'une certaines taille, le faire passer en long.

**Lizzon** · 01/07/2016, 12h28

Oups, j'avais mal compris, comment faire alors pour passer les tableaux à la vertical sur mobile ? J'imagine que cela se fait avec les media queries ?

**JujuPomme** · 01/07/2016, 14h20

Du Bootstrap peut faire l'affaire pour un tableau responsive : http://v4-alpha.getbootstrap.com/content/tables/

Cela dit, il sera pas vertical à l'alignement.

Pour des tableaux, je te conseil le pluggin FooTable, qui est un plugin JQuery facile à mettre en place, ou DataTables, qui eux gèrent le responsive.

Footable exemple : http://fooplugins.com/footable-demos/

**Lizzon** · 01/07/2016, 16h25

Merci pour ta réponse. J'ai utilisé Bootstrap et le résultat est déjà beaucoup mieux mais ça ne va pas pour les gros tableaux de certaines pages du site... Pour les plugins, j'ai installé FooTable mais cela n'a pas fonctionné et impossible de trouver l'autre plugin, DataTables. Mais si je comprends bien ce n'est pas possible de mettre le tableau à la vertical pour mobile ?

**JujuPomme** · 01/07/2016, 16h35

De quelle façon ça ne fonctionne pas?

Mmh, je me doutais pour les plugins, ça nécessite quelques notions d'AJAX et de javascript.

Il me semble que Bootstrap permet de créer des bandes enfants s'il y à trop de colonnes.

Je m'explique :

Si tu as un tableau comme ceci

col1 col2 col3 col4 col5 col6 col7
l1 l1 l1 l1 l1 l1 l1
l2 l2 l2 l2 l2 l2 l2
l3 l3 l3 l3 l3 l3 l3

Quand tu vas redimensionner ta fenêtre, ta ligne 1 aura un petit ( + ) dépliable, ou s'affichera la colonne 7. Si tu réduis encore plus, la colonne 6 viendra s'y ajouter et ainsi de suite.

C'est ce que permettent les deux plugins que je t'ai renseigné.

Sinon, pour Bootstrap, tu peux voir avec cet exemple : http://www.bootply.com/GGAMvot45f

**Lizzon** · 01/07/2016, 17h13

Oui je comprends bien ce que tu veux dire avec ton exemple de tableau. Ce n'est pas idéalement ce que je recherche mais ça pourrait quand même faire l'affaire !
j'ai vu que le plugin FooTable le permettait mais j'ai du mal l'utiliser car comme je te l'ai dis ça n'a pas marché.

Pour bootstrap j'ai simplement utilisé la div : <div class="table-responsive"> autour de mon tableau comme indiqué ici : http://creersonsiteweb.net/page-boot...ponsive-design, ce qui permet de scroller le tableau à l'horizontal sur mobile.

mais je ne sais pas comment faire pour aller plus loin et faire un tableau sur mobile avec des bandes enfants. As tu une idée de comment je pourrais l'implanter ? Si je me base sur l'exemple que tu m'as donné : http://www.bootply.com/GGAMvot45f, est ce que je dois intégrer les class à mon tableau et ajouter le petit code css comme indiqué sur le lien ?

**JujuPomme** · 01/07/2016, 17h18

Le plus simple, c'est de reprendre le dernier exemple avec les bandes enfant, et que tu l'adaptes à ton besoin.

Il vaut mieux adapter les outils à son besoin plutôt qu'adapter ses besoin à l'outil. (Un peu compliqué

)

Donc mon conseil :

Reprends ce dernier tableau, essaie déjà de reproduire l'exemple. Ensuite, tu te rapproches de ce que tu souhaites toi.

Bon courage, je reste sur écoute !

Edit : J'utilise moi-même Footable et fonctionne très bien. As-tu des connaissances en Ajax, JS, php?