Wichtige Erkenntnisse
- Eine Elementor-responsive Tabelle verwendet eines von drei Mustern auf Telefonen: in Karten gestapelte Zeilen, eine seitliche Schriftrolle innerhalb des tischeigenen Felds oder weniger Spalten.
- Eine fünfspaltige Tabelle benötigt etwa 640 px Breite, um lesbar zu bleiben, und die meisten Telefone zeigen zwischen 360 px und 430 px, so dass eine breite Tabelle überläuft, es sei denn, Sie wählen ein Muster.
- Das Master Addons Dynamic Table Widget stapelt jede Zeile in eine Karte auf Geräten mit einer Breite von bis zu 768 px, wenn Responsive Table? eingeschaltet ist, was die Standardeinstellung ist.
- Beim horizontalen Scrollen werden zwei CSS-Regeln verwendet: Überlauf-x, das auf einem Wrapper automatisch eingestellt ist, und eine minimale Breite auf dem darin enthaltenen Tisch.
- TablePress verfügt in den Einstellungen jeder Tabelle über ein Kontrollkästchen für horizontales Scrollen und ist standardmäßig deaktiviert.
Eine Elementor-responsive Tabelle ist eine, die auf einem Telefon lesbar bleibt, und Tabellen tun das nicht von selbst Spalten benötigen mehr Breite als ein Telefon, sodass die Tabelle normalerweise aus der rechten Seite des Bildschirms heraussticht.
Es gibt drei Möglichkeiten, damit umzugehen Wir haben alle drei auf Elementor 4.3 aufgebaut und auf einem 390 px breiten Telefonbildschirm überprüft.
Inhaltsverzeichnis
Warum Tabellen mobil kaputt gehen
Eine Tabelle kann ihre Spalten nicht so umwickeln, wie es eine Reihe von Elementor-Containern kann Jede Spalte muss neben den anderen sitzen, und jede braucht Platz für ihr längstes Wort Unsere fünfspaltige Versandtabelle ist mit etwa 640 px bequem Auf einem 390 px Telefon drückt der Browser die Spalten, bis Wörter drei Zeilen tief stapeln, und dann fällt die letzte Spalte vom Rand.
Elementors eigene responsive Steuerung hilft hier nicht viel, Sie können ein ganzes Widget pro Gerät ausblenden oder seine Breite ändern, aber Sie können nicht in das Innere einer Tabelle gelangen und ihre Zellen neu anordnen.
Die drei responsiven Tabellenmuster
Jedes Muster hat Kosten.
| Muster | Was der Besucher sieht | Am besten für | Kosten |
|---|---|---|---|
| Reihen in Karten stapeln | Eine Karte pro Reihe, Beschriftungen links | Zeilen lesen einzeln: Fahrpläne, Datenblätter, Preislisten | Schwer, eine Spalte über Zeilen hinweg zu vergleichen |
| Horizontalrollen | Der normale Tisch, seitwärts gewischt | Werte spaltenabwärts vergleichen | Säulen bleiben verborgen, bis der Besucher wischt |
| Spalten ausblenden | Eine kürzere Tabelle mit den Schlüsselspalten | Tabellen mit einer oder zwei optionalen Spalten | Telefonbesucher verlieren diese Daten |
Muster 1: Reihen in Karten stapeln
Durch das Stapeln wird jede Zeile zu einer kleinen Karte Die Kopfzeile verschwindet und jede Zelle zeigt ihren Spaltennamen als Beschriftung an, nichts ist versteckt und niemand scrollt seitwärts, also ist es die sicherste Voreinstellung.
Die Dynamische Tabelle Widget macht das mit einem Switch.
- Wählen Sie das Widget Dynamische Tabelle in Elementor aus.
- Im Reiter Inhalt öffnen Einstellungen.
- Verlassen Responsive Tabelle? Auf Ja gesetzt Ist standardmäßig an.
- Öffnen Sie die Seite auf einem Telefon Zeilenstapel auf Geräten mit einer Breite von bis zu 768 px.
Die Stapelregel überprüft die Gerätebreite, so dass das Verkleinern eines Desktop-Browserfensters diese nicht auslöst Testen Sie auf einem echten Telefon oder mit Geräteemulation Wenn Sie im Tab Stil eine große Zellauffüllung festlegen, überprüfen Sie, ob die Etiketten und Werte nicht zu dicht beieinander am Telefon sitzen.
Möchten Sie einen Tisch, der ohne CSS stapelt? Die Dynamisches Tabellen-Widget Responsive Table von Anfang an eingeschaltet hat.
Muster 2: Horizontale Schriftrolle
Horizontalscroll hält die Tabelle so wie sie ist und lässt sie vom Besucher innerhalb des eigenen Kästchens seitwärts wischen Die Seite selbst scrollt nicht seitwärts Verwenden Sie sie, wenn Personen eine Spalte auslesen müssen, z.B. Preise vergleichen.
Für eine HTML-Tabelle im HTML-Widget von Elementor wickeln Sie die Tabelle in eine Div ein und fügen Sie zwei Regeln hinzu:
<div class="table-scroll">
<table class="wide-table">
...
</table>
</div>
<style>
.table-scroll { overflow-x: auto; }
.table-scroll table { min-width: 640px; }
</style>Die min-width verhindert, dass der Browser die Spalten zerdrückt, und overflow-x: auto Fügt den Scroll nur dann hinzu, wenn der Bildschirm schmaler ist. Ändern Sie 640 px auf die Breite, die Ihre Tabelle benötigt, um auf einer Zeile pro Zelle zu bleiben.
Die Schwäche ist, dass nichts dem Besucher sagt, dass rechts mehr ist Eine Spalte, die wie im Screenshot halbiert wird, ist der beste Hinweis, den Sie geben können, also stellen Sie die Min-Breite nicht auf einen Wert ein, der genau an einem Spaltenrand endet.
Muster 3: Spalten ausblenden
Manchmal ist eine Spalte schön auf einem Desktop zu haben und unnötig auf einem Telefon, verstecken Sie es unter einem Haltepunkt und die Tabelle kann ohne andere Änderung passen.
Fügen Sie jedem eine Klasse hinzu th und td In den Spalten können Sie verlieren und diese Klasse dann auf kleinen Bildschirmen ausblenden:
<th class="hide-mobile">Delivery time</th>
...
<td class="hide-mobile">2 to 3 working days</td>
<style>
@media (max-width: 767px) {
.hide-cols .hide-mobile { display: none; }
}
</style>Hier hide-cols Klasse auf der Tabelle selbst ist.767 px ist der standardmäßige mobile Haltepunkt von Elementor, daher kommen die Spalten auf Tablets zurück.
Nur ausblenden, worauf ein Telefonbesucher verzichten kann Wenn die versteckte Spalte entscheidet, ob jemand kauft, stapeln oder scrollen.
Responsive TablePress-Tabellen in Elementor
Eine TablePress-Tabelle, die in Elementor platziert ist, verhält sich wie jede andere Tabelle: breite überlaufen Der Fix lebt in den TablePress-Einstellungen.
- Gehe zu TablePress und die Tabelle bearbeiten.
- Scrollen zu Tischfunktionen für Website-Besucher.
- Ticken Horizontales Scrollen. Es ist standardmäßig ausgeschaltet.
- Klicken Sie auf Änderungen speichern.
In unserem Test wurde dadurch der Überlauf behoben: Die Tabelle scrollte in ihrem Karton und die Seite blieb still. TablePress verfügt außerdem über Stapel- und Einklappmodi für Telefone, die Teil der kostenpflichtigen Responsive Tables-Funktion sind.
Eine schnelle mobile Checkliste
- Öffnen Sie die Seite auf einem echten Telefon. Emulatoren verpassen das Touchscrollen und einige Gerätebreitenregeln.
- Scrollen Sie die Seite seitlich, wenn sich die ganze Seite bewegt, läuft die Tabelle über.
- Headertext kurz halten “Free over” wickelt besser als “Free delivery on orders over”.
- Setzen Sie die wichtigste Spalte an die erste Es ist diejenige, die sichtbar bleibt, wenn eine Tabelle scrollt.
- Ziel für 16 px-Körpertext in Zellen Die Schriftart zu schrumpfen, damit sie zu einer Tabelle passt, macht sie unlesbar.
Häufig gestellte Fragen
Wie mache ich eine Tabelle in Elementor responsive?
Wählen Sie eines von drei Mustern Zeilen in Karten stapeln mit einem Tabellen-Widget, das es unterstützt, wie Dynamic Table Wickeln Sie eine HTML-Tabelle in eine Div mit overflow-x auf auto gesetzt, damit es seitwärts scrollt Oder verstecken Sie optionale Spalten unter 767 px mit einer CSS-Medienabfrage.
Warum ist mein Elementortisch auf dem Handy abgeschnitten?
Die Tabelle ist breiter als der Bildschirm und nichts sagt ihr, wie sie sich anpassen soll Tabellen können keine Spalten umwickeln, so dass die zusätzliche Breite am Rand vorbeischwappt Fügen Sie einen Scroll-Wrapper hinzu, schalten Sie eine Stapeloption in Ihrem Tabellen-Widget ein oder entfernen Sie eine Spalte auf kleinen Bildschirmen.
Kann ich eine Tabellenrolle horizontal in Elementor erstellen?
Ja. Für eine HTML-Tabelle, legen Sie sie in ein div mit overflow-x: auto und geben Sie der Tabelle eine min-Breite wie 640 px. Für eine TablePress-Tabelle kreuzen Sie in den Einstellungen dieser Tabelle horizontales Scrollen unter Tabellenfunktionen für Site-Besucher an.
Verfügt Elementor über ein responsives Tabellen-Widget?
Elementor hat überhaupt kein Tabellen-Widget, im Kern-Plugin oder in Pro. Responsive Tabellen in Elementor stammen von Addon-Widgets, Tabellen-Plugins wie TablePress oder HTML-Tabellen mit eigenem CSS.
Was ist besser auf Mobil, Stacking oder Scrollen?
Das Stapeln ist besser, wenn jede Zeile einzeln steht, beispielsweise eine Klasse in einem Stundenplan. Scrollen ist besser, wenn Besucher Zahlen in einer Spalte vergleichen, da gestapelte Karten diese Zahlen weit voneinander entfernt haben.
Letzte Gedanken
Um eine Elementor-responsive Tabelle zu erstellen, entscheiden Sie, was ein Telefonbesucher von ihr benötigt Stapeln Sie Zeilen, wenn jede Zeile einzeln gelesen wird, scrollen Sie, wenn Spalten verglichen werden, und verstecken Sie Spalten nur, wenn die Daten optional sind.
Wenn Sie lieber kein CSS schreiben möchten, dann Dynamische Tabelle Handhabt das Stapelmuster von einem Schalter im Panel aus.
Verwandte Lektüre
