{"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":"tabelle-in-wordpress-responsive-machen","status":"publish","type":"docs","link":"https:\/\/wptablebuilder.com\/de\/docs\/make-table-responsive-wordpress\/","title":{"rendered":"So machen Sie eine Tabelle in WP Table Builder responsiv"},"content":{"rendered":"
\n

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

\u00d6ffnen Sie die Tabelle im Builder, klicken Sie auf den Tab Responsive<\/strong> und aktivieren Sie Enable Responsive Table<\/strong>. W\u00e4hlen Sie den Breakpoint Tablet<\/strong> (bis 700px) oder Mobile<\/strong> (bis 375px) und w\u00e4hlen Sie dann Stack Direction<\/strong> (Row oder Column), Items Per Head<\/strong> und ob Sie First Row As Header<\/strong>verwenden m\u00f6chten. Jeder Breakpoint beh\u00e4lt sein eigenes Layout. Klicken Sie auf Save<\/strong>. Der Responsive-Modus ist kostenlos; das Deaktivieren einzelner Breakpoints erfordert Pro.<\/p>\n<\/div>\n\n\n\n

Eine responsive Tabelle \u00e4ndert ihr Layout auf kleinen Bildschirmen, damit sie lesbar bleibt. Statt jede Spalte zu verkleinern, kann WP Table Builder die Tabelle auf Tablets und Smartphones in kleinere Bl\u00f6cke stapeln, w\u00e4hrend Besucher am Desktop die Tabelle genau so sehen, wie Sie sie erstellt haben.<\/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>Kostenlos und Pro (Disable Breakpoint erfordert Pro)<\/td><\/tr>
Plugin-Version<\/strong><\/td>WP Table Builder 2.3.0 oder neuer f\u00fcr den hier gezeigten Bereich<\/td><\/tr>
Ben\u00f6tigte Zeit<\/strong><\/td>Etwa 3 Minuten<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n
<\/div><\/div><\/div>\n\n\n

Responsive-Optionen<\/h2>\n\n\n\n
Einstellung<\/th>Was es tut<\/th><\/tr><\/thead>
Enable Responsive Table<\/strong><\/td>Aktiviert responsive Layouts f\u00fcr diese Tabelle<\/td><\/tr>
Width Target<\/strong><\/td>Window<\/strong> nutzt die Browserbreite, um den Breakpoint zu w\u00e4hlen. Container<\/strong> nutzt die Breite des Bereichs, in dem die Tabelle steht, was f\u00fcr Tabellen in Seitenleisten oder schmalen Spalten besser ist.<\/td><\/tr>
Preview Width<\/strong><\/td>Die Breite f\u00fcr die Vorschau im Builder<\/td><\/tr>
Breakpoints<\/strong><\/td>Desktop<\/strong> (Tabelle wie erstellt), Tablet<\/strong> (bis 700px), Mobile<\/strong> (bis 375px)<\/td><\/tr>
Disable Breakpoint<\/strong><\/td>Schaltet responsive \u00c4nderungen f\u00fcr den ausgew\u00e4hlten Breakpoint ab (Pro)<\/td><\/tr>
Max Width<\/strong><\/td>Die gr\u00f6\u00dfte Bildschirmbreite, f\u00fcr die der Breakpoint gilt<\/td><\/tr>
First Row As Header<\/strong><\/td>Wiederholt beim Stapeln die Beschriftungen der ersten Zeile neben jedem Wert<\/td><\/tr>
Static First Row<\/strong><\/td>Beh\u00e4lt die erste Zeile als normale Zeile oben, statt sie zu wiederholen<\/td><\/tr>
Stack Direction<\/strong><\/td>Row<\/strong> stapelt jede Zeile in einen Block. Column<\/strong> stapelt jede Spalte in einen Block.<\/td><\/tr>
Items Per Head<\/strong><\/td>Wie viele Zeilen oder Spalten beim Stapeln unter jeder \u00dcberschrift gruppiert werden<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n
<\/div><\/div><\/div>\n\n\n

Schritt 1: Den Responsive-Modus aktivieren<\/h2>\n\n\n\n
    \n
  1. \u00d6ffnen Sie die Tabelle im Builder.<\/li>\n\n\n\n
  2. Klicken Sie auf Responsive<\/strong> (Tab) im linken Bereich.<\/li>\n\n\n\n
  3. Aktivieren Sie Enable Responsive Table<\/strong>.<\/li>\n<\/ol>\n\n\n
    <\/div><\/div><\/div>\n\n\n

    Schritt 2: Die Layouts f\u00fcr Tablet und Mobilger\u00e4te einrichten<\/h2>\n\n\n\n
      \n
    1. Unter Breakpoints<\/strong>, klicken Sie auf Tablet<\/strong> oder Mobile<\/strong>. Die Arbeitsfl\u00e4che wechselt zu dieser Bildschirmgr\u00f6\u00dfe.<\/li>\n\n\n\n
    2. W\u00e4hlen Sie einen Wert f\u00fcr Stack Direction<\/strong>:<\/li>\n<\/ol>\n\n\n\n