1485 sujets

Web Mobile et responsive web design

Rendre un tableau responsive - Media queries

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 :

@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 :

@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 !
Bonjour,

Merci pour ta réponse ! Je viens d'ajouter le code :
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
dans le head mais cela ne marche toujours pas...
Administrateur
Disons que "normalement" ça fonctionne. Du coup, sans voir la page en ligne, ou le code complet, c'est difficile Smiley ohwell
Bonsoir Eviouchka,

Merci beaucoup pour ta réponse et tes conseils de lecture, je vais étudier ça ! Smiley smile

@Raphael je t'ai envoyé un mp Smiley smile
Salut Eviouchka,

Après avoir étudié les articles 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.

Comment faire tout d'abord pour inverser l'orientation de mon tableau sur mobile ? J'imagine que cela se fait avec les media queries ?

Merci d'avance !
Modifié par Lizzon (01 Jul 2016 - 12:31)
Sujet clos
Aller à