Ce que c'est
Un tableau avec de nombreuses colonnes, ou construit avec des mesures fixes plutôt que flexibles, est naturellement large — ce qui n'est pas un problème sur un écran de bureau, mais ne se rétrécit pas pour tenir sur un écran de téléphone bien plus étroit comme le fait la plupart du reste du contenu sur une page bien construite. Il oblige alors soit toute la page à défiler horizontalement, soit se retrouve compressé de façon inconfortable et difficile à lire.
Pourquoi c'est important
Le défilement horizontal est l'une des choses les plus déroutantes qu'un visiteur puisse rencontrer sur un téléphone — cela casse le schéma normal de défilement vertical que les gens attendent partout ailleurs sur le web, et il est facile de vraiment manquer du contenu situé juste hors de l'écran à droite sans même réaliser qu'il est là. Sur une page par ailleurs parfaitement adaptée au mobile, un seul tableau large et non enveloppé peut suffire à faire paraître toute l'expérience cassée pour un visiteur mobile.
Comment le corriger
- Identifie quels tableaux de ton site ont de nombreuses colonnes ou ont été construits avec des largeurs fixes en pixels plutôt que flexibles.
- Enveloppe chaque tableau large dans un conteneur avec la propriété CSS
overflow-x: auto— cela conserve intacte la mise en page du tableau lui-même mais permet à un visiteur de faire défiler uniquement ce tableau horizontalement d'un geste du doigt, plutôt que de faire défiler toute la page. - Pour les tableaux comportant beaucoup de colonnes, envisage plutôt un motif de tableau responsive — par exemple, empiler chaque ligne dans sa propre carte étiquetée sur les écrans étroits plutôt que de conserver la grille traditionnelle à toutes les tailles.
- Si tu utilises un créateur de site, vérifie si son bloc tableau propose déjà un interrupteur "défilement mobile" ou "responsive" avant de construire une solution personnalisée.
- Teste la correction sur un vrai écran de téléphone étroit (ou le mode aperçu mobile de ton navigateur), pas seulement en redimensionnant une fenêtre de navigateur de bureau, car le défilement tactile se comporte différemment de celui à la souris.