{"id":21323,"date":"2025-07-26T06:17:47","date_gmt":"2025-07-26T06:17:47","guid":{"rendered":"https:\/\/wptablebuilder.com\/?post_type=docs&p=21323"},"modified":"2026-11-13T14:09:41","modified_gmt":"2026-11-13T14:09:41","password":"","slug":"comment-ajouter-du-css-personnalise-dans-le-tableau-de-wp-builder","status":"publish","type":"docs","link":"https:\/\/wptablebuilder.com\/fr\/docs\/how-to-add-custom-css-in-wp-table-builder\/","title":{"rendered":"Comment ajouter du CSS personnalis\u00e9 dans WP Table Builder"},"content":{"rendered":"
\n

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

Pour un tableau, ouvrez-le dans le constructeur, allez dans Settings<\/strong> (onglet), d\u00e9pliez Styles<\/strong>, saisissez votre CSS dans Extra Styles<\/strong> et cliquez sur Apply styles<\/strong>, puis sur Save<\/strong>. Pour tous les tableaux de votre site, allez dans WP Table Builder > Settings > Table Styles<\/strong>, ajoutez le CSS dans Custom CSS<\/strong> et cliquez sur Save<\/strong>. Les deux sont gratuits et prennent en charge les media queries.<\/p>\n<\/div>\n\n\n\n

Le CSS personnalis\u00e9 vous permet de modifier des d\u00e9tails pour lesquels le constructeur n\u2019a pas de r\u00e9glage, comme une graisse de police particuli\u00e8re, une ombre ou un rendu diff\u00e9rent sur les tr\u00e8s petits \u00e9crans.<\/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<\/td><\/tr>
Comp\u00e9tences<\/strong><\/td>Notions de CSS<\/td><\/tr>
Version de l\u2019extension<\/strong><\/td>WP Table Builder 2.1.0 ou plus r\u00e9cent (aper\u00e7u du CSS dans le constructeur)<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n
<\/div><\/div><\/div>\n\n\n

Ajouter du CSS \u00e0 un tableau<\/h2>\n\n\n\n
    \n
  1. Ouvrez le tableau dans le constructeur et cliquez sur Settings<\/strong> .<\/li>\n\n\n\n
  2. Saisissez styles<\/code> dans Search settings<\/strong>, ou faites d\u00e9filer jusqu\u2019\u00e0 Styles<\/strong>, et d\u00e9pliez-la.<\/li>\n\n\n\n
  3. \u00c9crivez votre CSS dans Extra Styles<\/strong>.<\/li>\n\n\n\n
  4. Cliquez sur Apply styles<\/strong> pour le pr\u00e9visualiser dans le constructeur.<\/li>\n\n\n\n
  5. Cliquez sur Save<\/strong>.<\/li>\n<\/ol>\n\n\n
    <\/div><\/div><\/div>\n\n\n

    Ajouter du CSS \u00e0 tous les tableaux<\/h2>\n\n\n\n
      \n
    1. Allez dans WP Table Builder > Settings<\/strong>.<\/li>\n\n\n\n
    2. Ouvrez Table Styles<\/strong> (onglet). La remarque indique que les styles s\u2019appliquent \u00e0 tous les tableaux.<\/li>\n\n\n\n
    3. Ajoutez votre CSS dans Custom CSS<\/strong> et cliquez sur Save<\/strong>.<\/li>\n<\/ol>\n\n\n
      <\/div><\/div><\/div>\n\n\n

      S\u00e9lecteurs utiles<\/h2>\n\n\n\n
      S\u00e9lecteur<\/th>Cible<\/th><\/tr><\/thead>
      .wptb-cell<\/code><\/td>Toutes les cellules du tableau<\/td><\/tr>
      .wptb-image-element-target<\/code><\/td>Images des \u00e9l\u00e9ments Image<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

      Utilisez l\u2019outil Inspecter de votre navigateur sur la page publi\u00e9e pour trouver les noms de classes exacts dont vous avez besoin.<\/p>\n\n\n

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

      Exemple<\/h2>\n\n\n\n

      .wptb-cell { font-weight: 500; }<\/code><\/p>\n\n\n\n

      @media (max-width: 600px) { .wptb-cell { font-size: 14px; } }<\/code><\/p>\n\n\n

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

      Conseils<\/h2>\n\n\n\n