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 :
Code:
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:
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 !
