Kurze Antwort
Öffnen Sie die Tabelle im Builder, klicken Sie auf den Tab Responsive und aktivieren Sie Enable Responsive Table. Wählen Sie den Breakpoint Tablet (bis 700px) oder Mobile (bis 375px) und wählen Sie dann Stack Direction (Row oder Column), Items Per Head und ob Sie First Row As Headerverwenden möchten. Jeder Breakpoint behält sein eigenes Layout. Klicken Sie auf Save. Der Responsive-Modus ist kostenlos; das Deaktivieren einzelner Breakpoints erfordert Pro.
Eine responsive Tabelle ändert 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öcke stapeln, während Besucher am Desktop die Tabelle genau so sehen, wie Sie sie erstellt haben.
Voraussetzungen #
| Punkt | Details |
|---|---|
| Tarif | Kostenlos und Pro (Disable Breakpoint erfordert Pro) |
| Plugin-Version | WP Table Builder 2.3.0 oder neuer für den hier gezeigten Bereich |
| Benötigte Zeit | Etwa 3 Minuten |
Responsive-Optionen #
| Einstellung | Was es tut |
|---|---|
| Enable Responsive Table | Aktiviert responsive Layouts für diese Tabelle |
| Width Target | Window nutzt die Browserbreite, um den Breakpoint zu wählen. Container nutzt die Breite des Bereichs, in dem die Tabelle steht, was für Tabellen in Seitenleisten oder schmalen Spalten besser ist. |
| Preview Width | Die Breite für die Vorschau im Builder |
| Breakpoints | Desktop (Tabelle wie erstellt), Tablet (bis 700px), Mobile (bis 375px) |
| Disable Breakpoint | Schaltet responsive Änderungen für den ausgewählten Breakpoint ab (Pro) |
| Max Width | Die größte Bildschirmbreite, für die der Breakpoint gilt |
| First Row As Header | Wiederholt beim Stapeln die Beschriftungen der ersten Zeile neben jedem Wert |
| Static First Row | Behält die erste Zeile als normale Zeile oben, statt sie zu wiederholen |
| Stack Direction | Row stapelt jede Zeile in einen Block. Column stapelt jede Spalte in einen Block. |
| Items Per Head | Wie viele Zeilen oder Spalten beim Stapeln unter jeder Überschrift gruppiert werden |
Schritt 1: Den Responsive-Modus aktivieren #
- Öffnen Sie die Tabelle im Builder.
- Klicken Sie auf Responsive (Tab) im linken Bereich.
- Aktivieren Sie Enable Responsive Table.
Schritt 2: Die Layouts für Tablet und Mobilgeräte einrichten #
- Unter Breakpoints, klicken Sie auf Tablet oder Mobile. Die Arbeitsfläche wechselt zu dieser Bildschirmgröße.
- Wählen Sie einen Wert für Stack Direction:
- Row für Datentabellen, in denen jede Zeile ein Eintrag ist (ein Produkt, eine Person, ein Ereignis).
- Column für Vergleichs- und Preistabellen, in denen jede Spalte ein Produkt oder Tarif ist.
- Lassen Sie First Row As Header aktiviert, damit die Beschriftungen neben jedem Wert wiederholt werden.
- Legen Sie Items Per Head (1 ist für die meisten Smartphones am besten).
- Wiederholen Sie dies für den anderen Breakpoint und klicken Sie dann auf Save.
Änderungen an einem Breakpoint wirken sich nur auf dessen Layout aus. Der Hinweis unten im Bereich zeigt, welches Layout Sie gerade bearbeiten.
Schritt 3: Auf echten Geräten testen #
Verwenden Sie Desktop, Tablet und Mobile (Symbole in der oberen Leiste), um jedes Layout in der Vorschau anzusehen, und öffnen Sie dann die veröffentlichte Seite auf einem Smartphone.
Weitere Optionen für Mobilgeräte #
- Horizontales Scrollen behält das Desktop-Layout bei und lässt Besucher seitlich scrollen.
- Eine Spalte auf Mobilgeräten ausblenden entfernt auf Smartphones weniger wichtige Spalten.
- Fixierte erste Spalte (Pro) hält Produktnamen beim seitlichen Scrollen sichtbar.
Häufig gestellte Fragen #
Sind Tabellen von WP Table Builder responsive?
Ja. Aktivieren Sie Enable Responsive Table im Tab Responsive und richten Sie die Layouts für Tablet und Mobilgeräte ein. Besucher am Desktop sehen die Tabelle weiterhin so, wie Sie sie erstellt haben.
Soll ich nach Zeilen oder nach Spalten stapeln?
Stapeln Sie nach Zeilen, wenn jede Zeile ein Eintrag ist, etwa in einer Produktliste. Stapeln Sie nach Spalten, wenn jede Spalte ein Eintrag ist, etwa in einer Preis- oder Vergleichstabelle.
Welche Breakpoints gibt es standardmäßig?
Tablet gilt bis 700px Breite und Mobile bis 375px. Sie können den Max Width jedes Breakpoints ändern.
Was ist der Unterschied zwischen Window und Container?
Window wählt das Layout anhand der Browserbreite. Container wählt es anhand der Breite des Bereichs, in dem die Tabelle steht, was zu Tabellen in Spalten oder Seitenleisten passt.
Kann ich das Desktop-Layout auf Tablets beibehalten?
Ja, mit WP Table Builder Pro. Wählen Sie den Breakpoint Tablet aus und aktivieren Sie Disable Breakpoint.
Verwandte Dokumente #
- So lassen Sie eine Tabelle in WP Table Builder horizontal scrollen
- So blenden Sie eine Tabellenspalte auf Mobilgeräten in WP Table Builder aus
- So fixieren Sie eine Zeile oder Spalte in WP Table Builder
- So verwenden Sie th-Kopfzellen für die erste Zeile in WP Table Builder
- So ändern Sie Zeilenhöhe und Spaltenbreite in WP Table Builder
