Réponse rapide
Ouvrez le tableau dans le constructeur, cliquez sur l’onglet Responsive et activez Enable Responsive Table. Sélectionnez le point de rupture Tablet (jusqu’à 700px) ou Mobile (jusqu’à 375px), puis choisissez Stack Direction (Row ou Column), Items Per Head et indiquez si vous utilisez First Row As Header. Chaque point de rupture conserve sa propre mise en page. Cliquez sur Save. Le mode responsive est gratuit ; désactiver un point de rupture précis nécessite Pro.
Un tableau responsive modifie sa mise en page sur les petits écrans pour rester lisible. Au lieu de réduire chaque colonne, WP Table Builder peut empiler le tableau en blocs plus petits sur tablettes et téléphones, tandis que les visiteurs sur ordinateur voient le tableau exactement tel que vous l’avez créé.
Prérequis #
| Élément | Détails |
|---|---|
| Offre | Gratuit et Pro (Disable Breakpoint nécessite Pro) |
| Version de l’extension | WP Table Builder 2.3.0 ou version ultérieure pour le panneau présenté ici |
| Temps nécessaire | Environ 3 minutes |
Options responsive #
| Réglage | Ce qu’il fait |
|---|---|
| Enable Responsive Table | Active les mises en page responsive pour ce tableau |
| Width Target | Window utilise la largeur du navigateur pour choisir le point de rupture. Container utilise la largeur de la zone où se trouve le tableau, ce qui est préférable pour les tableaux dans des barres latérales ou des colonnes étroites. |
| Preview Width | La largeur utilisée pour l’aperçu dans le constructeur |
| Breakpoints | Desktop (tableau tel que créé), Tablet (jusqu’à 700px), Mobile (jusqu’à 375px) |
| Disable Breakpoint | Désactive les modifications responsive pour le point de rupture sélectionné (Pro) |
| Max Width | La plus grande largeur d’écran à laquelle le point de rupture s’applique |
| First Row As Header | Répète les libellés de la première ligne à côté de chaque valeur une fois empilé |
| Static First Row | Conserve la première ligne comme une ligne normale en haut au lieu de la répéter |
| Stack Direction | Row empile chaque ligne dans un bloc. Column empile chaque colonne dans un bloc. |
| Items Per Head | Le nombre de lignes ou de colonnes regroupées sous chaque en-tête une fois empilé |
Étape 1 : Activer le mode responsive #
- Ouvrez le tableau dans le constructeur.
- Cliquez sur Responsive (onglet) dans le panneau de gauche.
- Activez Enable Responsive Table.
Étape 2 : Configurer les mises en page tablette et mobile #
- Sous Breakpoints, cliquez sur Tablet ou Mobile. Le canevas passe à cette taille d’écran.
- Choisissez une valeur pour Stack Direction:
- Row pour les tableaux de données, où chaque ligne est un élément (un produit, une personne, un événement).
- Column pour les tableaux comparatifs et de prix, où chaque colonne est un produit ou une offre.
- Laissez First Row As Header activé pour que les libellés se répètent à côté de chaque valeur.
- Réglez Items Per Head (1 est idéal pour la plupart des téléphones).
- Répétez l’opération pour l’autre point de rupture, puis cliquez sur Save.
Les modifications d’un point de rupture ne changent que la mise en page de ce point de rupture. La note en bas du panneau confirme la mise en page que vous modifiez.
Étape 3 : Tester sur de vrais appareils #
Utilisez Desktop, Tablet et Mobile (icônes de la barre supérieure) pour prévisualiser chaque mise en page, puis ouvrez la page publiée sur un téléphone.
Autres options mobiles #
- Défilement horizontal conserve la mise en page ordinateur et permet aux visiteurs de faire défiler horizontalement.
- Masquer une colonne sur mobile supprime les colonnes moins importantes sur les téléphones.
- Première colonne fixe (Pro) garde les noms de produits visibles pendant le défilement horizontal.
Questions fréquentes #
Les tableaux WP Table Builder sont-ils responsive ?
Oui. Activez Enable Responsive Table dans l’onglet Responsive et configurez les mises en page tablette et mobile. Les visiteurs sur ordinateur voient toujours le tableau tel que vous l’avez créé.
Faut-il empiler par ligne ou par colonne ?
Empilez par ligne lorsque chaque ligne est un élément, comme une liste de produits. Empilez par colonne lorsque chaque colonne est un élément, comme dans un tableau de prix ou comparatif.
Quels sont les points de rupture par défaut ?
Tablet s’applique jusqu’à 700px de large et Mobile jusqu’à 375px. Vous pouvez modifier le Max Width de chaque point de rupture.
Quelle est la différence entre Window et Container ?
Window choisit la mise en page selon la largeur du navigateur. Container la choisit selon la largeur de l’espace où se trouve le tableau, ce qui convient aux tableaux placés dans des colonnes ou des barres latérales.
Puis-je conserver la mise en page ordinateur sur les tablettes ?
Oui, avec WP Table Builder Pro. Sélectionnez le point de rupture Tablet et activez Disable Breakpoint.
Documents associés #
- Comment faire défiler un tableau horizontalement dans WP Table Builder
- Comment masquer une colonne de tableau sur mobile dans WP Table Builder
- Comment rendre une ligne ou une colonne fixe dans WP Table Builder
- Comment utiliser des cellules d’en-tête th pour la première ligne dans WP Table Builder
- Comment modifier la hauteur des lignes et la largeur des colonnes dans WP Table Builder
