{"id":1908,"date":"2025-03-11T09:10:10","date_gmt":"2025-03-11T09:10:10","guid":{"rendered":"https:\/\/wptablebuilder.com\/?post_type=docs&p=1908"},"modified":"2026-11-13T14:01:03","modified_gmt":"2026-11-13T14:01:03","password":"","slug":"creer-une-table-responsive-pour-wordpress","status":"publish","type":"docs","link":"https:\/\/wptablebuilder.com\/fr\/docs\/make-table-responsive-wordpress\/","title":{"rendered":"Comment rendre un tableau responsive dans WP Table Builder"},"content":{"rendered":"
\n

R\u00e9ponse rapide<\/p>\n\n\n\n

Ouvrez le tableau dans le constructeur, cliquez sur l\u2019onglet Responsive<\/strong> et activez Enable Responsive Table<\/strong>. S\u00e9lectionnez le point de rupture Tablet<\/strong> (jusqu\u2019\u00e0 700px) ou Mobile<\/strong> (jusqu\u2019\u00e0 375px), puis choisissez Stack Direction<\/strong> (Row ou Column), Items Per Head<\/strong> et indiquez si vous utilisez First Row As Header<\/strong>. Chaque point de rupture conserve sa propre mise en page. Cliquez sur Save<\/strong>. Le mode responsive est gratuit ; d\u00e9sactiver un point de rupture pr\u00e9cis n\u00e9cessite Pro.<\/p>\n<\/div>\n\n\n\n

Un tableau responsive modifie sa mise en page sur les petits \u00e9crans pour rester lisible. Au lieu de r\u00e9duire chaque colonne, WP Table Builder peut empiler le tableau en blocs plus petits sur tablettes et t\u00e9l\u00e9phones, tandis que les visiteurs sur ordinateur voient le tableau exactement tel que vous l\u2019avez cr\u00e9\u00e9.<\/p>\n\n\n

<\/div><\/div><\/div>\n\n\n

Pr\u00e9requis<\/h2>\n\n\n\n
\u00c9l\u00e9ment<\/th>D\u00e9tails<\/th><\/tr><\/thead>
Offre<\/strong><\/td>Gratuit et Pro (Disable Breakpoint n\u00e9cessite Pro)<\/td><\/tr>
Version de l\u2019extension<\/strong><\/td>WP Table Builder 2.3.0 ou version ult\u00e9rieure pour le panneau pr\u00e9sent\u00e9 ici<\/td><\/tr>
Temps n\u00e9cessaire<\/strong><\/td>Environ 3 minutes<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n
<\/div><\/div><\/div>\n\n\n

Options responsive<\/h2>\n\n\n\n
R\u00e9glage<\/th>Ce qu\u2019il fait<\/th><\/tr><\/thead>
Enable Responsive Table<\/strong><\/td>Active les mises en page responsive pour ce tableau<\/td><\/tr>
Width Target<\/strong><\/td>Window<\/strong> utilise la largeur du navigateur pour choisir le point de rupture. Container<\/strong> utilise la largeur de la zone o\u00f9 se trouve le tableau, ce qui est pr\u00e9f\u00e9rable pour les tableaux dans des barres lat\u00e9rales ou des colonnes \u00e9troites.<\/td><\/tr>
Preview Width<\/strong><\/td>La largeur utilis\u00e9e pour l\u2019aper\u00e7u dans le constructeur<\/td><\/tr>
Breakpoints<\/strong><\/td>Desktop<\/strong> (tableau tel que cr\u00e9\u00e9), Tablet<\/strong> (jusqu\u2019\u00e0 700px), Mobile<\/strong> (jusqu\u2019\u00e0 375px)<\/td><\/tr>
Disable Breakpoint<\/strong><\/td>D\u00e9sactive les modifications responsive pour le point de rupture s\u00e9lectionn\u00e9 (Pro)<\/td><\/tr>
Max Width<\/strong><\/td>La plus grande largeur d\u2019\u00e9cran \u00e0 laquelle le point de rupture s\u2019applique<\/td><\/tr>
First Row As Header<\/strong><\/td>R\u00e9p\u00e8te les libell\u00e9s de la premi\u00e8re ligne \u00e0 c\u00f4t\u00e9 de chaque valeur une fois empil\u00e9<\/td><\/tr>
Static First Row<\/strong><\/td>Conserve la premi\u00e8re ligne comme une ligne normale en haut au lieu de la r\u00e9p\u00e9ter<\/td><\/tr>
Stack Direction<\/strong><\/td>Row<\/strong> empile chaque ligne dans un bloc. Column<\/strong> empile chaque colonne dans un bloc.<\/td><\/tr>
Items Per Head<\/strong><\/td>Le nombre de lignes ou de colonnes regroup\u00e9es sous chaque en-t\u00eate une fois empil\u00e9<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n
<\/div><\/div><\/div>\n\n\n

\u00c9tape 1 : Activer le mode responsive<\/h2>\n\n\n\n
    \n
  1. Ouvrez le tableau dans le constructeur.<\/li>\n\n\n\n
  2. Cliquez sur Responsive<\/strong> (onglet) dans le panneau de gauche.<\/li>\n\n\n\n
  3. Activez Enable Responsive Table<\/strong>.<\/li>\n<\/ol>\n\n\n
    <\/div><\/div><\/div>\n\n\n

    \u00c9tape 2 : Configurer les mises en page tablette et mobile<\/h2>\n\n\n\n
      \n
    1. Sous Breakpoints<\/strong>, cliquez sur Tablet<\/strong> ou Mobile<\/strong>. Le canevas passe \u00e0 cette taille d\u2019\u00e9cran.<\/li>\n\n\n\n
    2. Choisissez une valeur pour Stack Direction<\/strong>:<\/li>\n<\/ol>\n\n\n\n