Discussion :

[Lizzon]

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]

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]

Salut,

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

[Lizzon]

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]

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]

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 ?