Principaux points à retenir
- Une table réactive Elementor utilise l'un des trois modèles sur les téléphones : des lignes empilées dans des cartes, un défilement latéral à l'intérieur de la propre boîte de la table ou moins de colonnes.
- Une table à cinq colonnes a besoin d'environ 640 px de largeur pour rester lisible, et la plupart des téléphones affichent entre 360 px et 430 px, donc une table large déborde à moins que vous ne choisissiez un motif.
- Le widget Table dynamique des modules principaux empile chaque ligne dans une carte sur des appareils jusqu'à 768 px de large lorsque Table réactive ? est allumé, ce qui est la valeur par défaut.
- Le défilement horizontal prend deux règles CSS : le débordement x défini sur une machine d'emballage automatique et une largeur minimale sur la table à l'intérieur.
- TablePress a une case à cocher Défilement horizontal dans les paramètres de chaque table, et elle est désactivée par défaut.
Une table réactive Elementor est une table qui reste lisible sur un téléphone, et les tables ne le font pas par elles-mêmes. Les colonnes ont besoin de plus de largeur qu’un téléphone, donc la table sort généralement du côté droit de l’écran.
Il y a trois façons de gérer ça Nous avons construit les trois sur Elementor 4.3 et les avons vérifiés sur un écran de téléphone de 390 px de large.
Table des matières
Pourquoi les tables se brisent sur mobile
Une table ne peut pas envelopper ses colonnes comme une rangée de conteneurs Elementor peut. Chaque colonne doit s'asseoir à côté des autres, et chacun a besoin de place pour son mot le plus long Notre table d'expédition à cinq colonnes est confortable à environ 640 px Sur un téléphone 390 px le navigateur presse les colonnes jusqu'à ce que les mots empilent trois lignes de profondeur, et puis la dernière colonne tombe du bord.
Les propres commandes réactives d'Elementor n'aident pas beaucoup ici Vous pouvez cacher un widget entier par appareil ou modifier sa largeur, mais vous ne pouvez pas atteindre à l'intérieur d'une table et réorganiser ses cellules.
Les trois modèles de table réactifs
Chaque motif a un coût.
| Modèle | Ce que le visiteur voit | Meilleur pour | Coût |
|---|---|---|---|
| Empilez les rangées dans les cartes | Une carte par rangée, étiquettes à gauche | Les lignes lisent une à la fois : horaires, fiches techniques, listes de prix | Difficile de comparer une colonne sur plusieurs lignes |
| Rouleau horizontal | La table normale, glissée latéralement | Comparaison des valeurs dans une colonne | Les colonnes restent cachées jusqu'à ce que le visiteur glisse |
| Cacher les colonnes | Un tableau plus court avec les colonnes de touches | Tableaux avec une ou deux colonnes optionnelles | Les visiteurs du téléphone perdent ces données |
Modèle 1 : Empiler des rangées dans des cartes
L'empilement transforme chaque ligne en une petite carte La ligne d'en-tête disparaît et chaque cellule affiche son nom de colonne comme une étiquette Rien n'est caché et personne ne défile latéralement, c'est donc la valeur par défaut la plus sûre.
Le Tableau dynamique widget fait cela avec un commutateur.
- Sélectionnez le widget Table dynamique dans Elementor.
- Dans l'onglet Contenu, ouvrez Paramètres.
- Partir Tableau réactif? définir sur Oui. Il est activé par défaut.
- Ouvrez la page sur un téléphone. Les lignes s'empilent sur des appareils jusqu'à 768 px de large.
La règle d'empilage vérifie la largeur de l'appareil, donc la réduction d'une fenêtre de navigateur de bureau ne le déclenchera pas Testez sur un vrai téléphone ou avec l'émulation de l'appareil Si vous définissez un remplissage de cellules volumineux dans l'onglet Style, vérifiez que les étiquettes et les valeurs ne sont pas trop rapprochées sur le téléphone.
Vous voulez une table qui empile sans CSS ? Le Widget Table dynamique la table réactive s'allume dès le début.
Motif 2 : Parchemin horizontal
Le défilement horizontal maintient la table telle qu'elle est et permet au visiteur de la glisser latéralement à l'intérieur de sa propre boîte La page elle-même ne défile pas latéralement Utilisez-la lorsque les gens ont besoin de lire une colonne, comme comparer les prix.
Pour une table HTML dans le widget HTML d'Elementor, enveloppez la table dans un div et ajoutez deux règles :
<div class="table-scroll">
<table class="wide-table">
...
</table>
</div>
<style>
.table-scroll { overflow-x: auto; }
.table-scroll table { min-width: 640px; }
</style>Le min-width empêche le navigateur d'écraser les colonnes, et overflow-x: auto ajoute le défilement seulement lorsque l'écran est plus étroit que cela Changez 640 px à la largeur dont votre table a besoin pour rester sur une ligne par cellule.
La faiblesse est que rien ne dit au visiteur qu'il y a plus à droite Une colonne qui est coupée en deux, comme dans la capture d'écran, est le meilleur indice que vous pouvez donner, alors ne définissez pas la largeur min à une valeur qui se termine exactement à un bord de colonne.
Modèle 3 : Masquer les colonnes
Parfois, une colonne est agréable à avoir sur un bureau et inutile sur un téléphone Cachez-la sous un point d'arrêt et le tableau peut tenir sans aucun autre changement.
Ajoutez une classe à chaque th et td dans les colonnes, vous pouvez perdre, puis masquer cette classe sur de petits écrans :
<th class="hide-mobile">Delivery time</th>
...
<td class="hide-mobile">2 to 3 working days</td>
<style>
@media (max-width: 767px) {
.hide-cols .hide-mobile { display: none; }
}
</style>Ici hide-cols est une classe sur la table elle-même. 767 px est le point d'arrêt mobile par défaut d'Elementor, donc les colonnes reviennent sur les tablettes.
Cachez uniquement ce dont un visiteur du téléphone peut se passer Si la colonne cachée décide si quelqu'un achète, utilisez l'empilement ou le défilement.
TablePress réactive tables dans Elementor
Une table TablePress placée dans Elementor se comporte comme n'importe quelle autre table : les larges débordent Le correctif vit dans les paramètres TablePress.
- Aller à TablePresse et éditer le tableau.
- Faire défiler jusqu'à Caractéristiques du tableau pour les visiteurs du site.
- s'écouler Défilement horizontal. Il est désactivé par défaut.
- Cliquez Enregistrer Modifications.
Dans notre test, cela a corrigé le débordement : la table a défilé à l'intérieur de sa boîte et la page est restée immobile. TablePress propose également des modes d'empilement et d'effondrement pour les téléphones, et ceux-ci font partie de sa fonctionnalité de tables réactives payantes.
Une liste de contrôle mobile rapide
- Ouvrez la page sur un vrai téléphone Les émulateurs manquent le défilement tactile et certaines règles de largeur de l'appareil.
- Faites défiler la page de côté Si toute la page bouge, la table déborde.
- Gardez le texte de l'en-tête court. “Free over” wraps mieux que “Livraison gratuite sur les commandes via”.
- Mettez la colonne la plus importante en premier C'est celle qui reste visible quand une table défile.
- Visez un corps de texte 16 px dans les cellules. Réduire la police pour l'adapter à un tableau la rend illisible.
Questions fréquemment posées
Comment puis-je rendre une table réactive dans Elementor ?
Choisissez l'un des trois modèles Empiler les lignes dans les cartes avec un widget de table qui le supporte, tel que Tableau dynamique Enroulez une table HTML dans un div avec overflow-x défini sur auto pour qu'il défile latéralement Ou masquer les colonnes optionnelles en dessous de 767 px avec une requête multimédia CSS.
Pourquoi ma table Elementor est-elle coupée sur mobile ?
La table est plus large que l'écran et rien ne lui indique comment s'adapter Les tables ne peuvent pas envelopper les colonnes, donc la largeur supplémentaire déborde au-delà du bord Ajoutez un wrapper de défilement, activez une option d'empilage dans votre widget de table ou supprimez une colonne sur les petits écrans.
Puis-je faire défiler une table horizontalement dans Elementor ?
Oui. Pour une table HTML, mettez-la dans un div avec overflow-x : auto et donnez à la table une min-largeur telle que 640 px Pour une table TablePress, cochez Défilement horizontal sous Fonctionnalités de la table pour les visiteurs du site dans les paramètres de cette table.
Elementor a-t-il un widget de table réactif ?
Elementor n'a pas de widget de table du tout, dans le plugin principal ou dans Pro. Les tables réactives dans Elementor proviennent de widgets d'addon, de plugins de table tels que TablePress ou de tables HTML avec votre propre CSS.
Qu'est-ce qui est le mieux sur mobile, empilage ou défilement ?
L'empilement est meilleur lorsque chaque ligne est autonome, comme une classe dans un horaire Le défilement est meilleur lorsque les visiteurs comparent les nombres dans une colonne, car les cartes empilées éloignent ces nombres.
Réflexions finales
Pour faire une table réactive Elementor, décidez de ce dont un visiteur du téléphone a besoin Empilez les lignes lorsque chaque ligne est lue seule, faites défiler lorsque les colonnes sont comparées et masquez les colonnes uniquement lorsque les données sont facultatives.
Si vous préférez ne pas écrire CSS, Tableau dynamique gère le modèle d'empilage à partir d'un interrupteur dans le panneau.
Lecture connexe
