{"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":"so-fugen-sie-benutzerdefinierte-css-in-den-wp-table-builder-hinzu","status":"publish","type":"docs","link":"https:\/\/wptablebuilder.com\/de\/docs\/how-to-add-custom-css-in-wp-table-builder\/","title":{"rendered":"So f\u00fcgen Sie in WP Table Builder eigenes CSS hinzu"},"content":{"rendered":"
\n

Kurze Antwort<\/p>\n\n\n\n

F\u00fcr eine Tabelle \u00f6ffnen Sie sie im Builder, gehen zu Settings<\/strong> (Tab), klappen Sie Styles<\/strong>, geben Ihr CSS ein in Extra Styles<\/strong> und klicken Sie auf Apply styles<\/strong>und dann auf Save<\/strong>. F\u00fcr alle Tabellen Ihrer Website gehen Sie zu WP Table Builder > Settings > Table Styles<\/strong>und f\u00fcgen das CSS ein in Custom CSS<\/strong> und klicken Sie auf Save<\/strong>. Beides ist kostenlos und unterst\u00fctzt Media Queries.<\/p>\n<\/div>\n\n\n\n

Mit eigenem CSS \u00e4ndern Sie Details, f\u00fcr die der Builder keine Einstellung hat, etwa eine besondere Schriftst\u00e4rke, einen Schatten oder ein anderes Aussehen auf sehr kleinen Bildschirmen.<\/p>\n\n\n

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

Voraussetzungen<\/h2>\n\n\n\n
Punkt<\/th>Details<\/th><\/tr><\/thead>
Tarif<\/strong><\/td>Free und Pro<\/td><\/tr>
Kenntnisse<\/strong><\/td>CSS-Grundlagen<\/td><\/tr>
Plugin-Version<\/strong><\/td>WP Table Builder 2.1.0 oder neuer (CSS-Vorschau im Builder)<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n
<\/div><\/div><\/div>\n\n\n

CSS zu einer Tabelle hinzuf\u00fcgen<\/h2>\n\n\n\n
    \n
  1. \u00d6ffnen Sie die Tabelle im Builder und klicken Sie auf Settings<\/strong> .<\/li>\n\n\n\n
  2. Geben Sie stile<\/code> unter Search settings<\/strong>, oder scrollen Sie zu Styles<\/strong>und klappen Sie es auf.<\/li>\n\n\n\n
  3. Schreiben Sie Ihr CSS in Extra Styles<\/strong>.<\/li>\n\n\n\n
  4. Klicken Sie auf Apply styles<\/strong> , um es im Builder in der Vorschau zu sehen.<\/li>\n\n\n\n
  5. Klicken Sie auf Save<\/strong>.<\/li>\n<\/ol>\n\n\n
    <\/div><\/div><\/div>\n\n\n

    CSS zu allen Tabellen hinzuf\u00fcgen<\/h2>\n\n\n\n
      \n
    1. Gehen Sie zu WP Table Builder > Settings<\/strong>.<\/li>\n\n\n\n
    2. \u00d6ffnen Sie Table Styles<\/strong> (Tab). Der Hinweis besagt, dass die Stile auf alle Tabellen angewendet werden.<\/li>\n\n\n\n
    3. F\u00fcgen Sie Ihr CSS ein in Custom CSS<\/strong> und klicken Sie auf Save<\/strong>.<\/li>\n<\/ol>\n\n\n
      <\/div><\/div><\/div>\n\n\n

      N\u00fctzliche Selektoren<\/h2>\n\n\n\n
      Selektor<\/th>Ziel<\/th><\/tr><\/thead>
      .wptb-cell<\/code><\/td>Jede Tabellenzelle<\/td><\/tr>
      .wptb-image-element-target<\/code><\/td>Bilder in Image-Elementen<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

      Nutzen Sie das Untersuchen-Werkzeug Ihres Browsers auf der Live-Seite, um die genauen Klassennamen zu finden.<\/p>\n\n\n

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

      Beispiel<\/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

      Tipps<\/h2>\n\n\n\n