So erstellen Sie eine responsive Tabelle mit horizontalem Scrollen in Divi

Das Erstellen einer responsiven Tabelle kann eine Herausforderung sein, insbesondere wenn Sie eine Tabelle mit vielen Spalten haben. Eine gute Möglichkeit, dieses Problem zu lösen, besteht darin, der Tabelle eine horizontale Bildlauffähigkeit hinzuzufügen. Eine Tabelle mit horizontalem Scrollen löst zwei Hauptprobleme. Erstens ermöglicht es dem Designer, den für den Tabelleninhalt erforderlichen Abstand einzuhalten (wirklich schmale Spalten führen dazu, dass der Inhalt zu sehr zusammengedrückt wird). Und zweitens ermöglicht es dem Benutzer, den leicht lesbaren Tabelleninhalt auf mobilen Geräten anzuzeigen.

In diesem Tutorial zeigen wir Ihnen, wie Sie Divi verwenden, um eine vollständig benutzerdefinierte Tabelle mit horizontalem Scrollen zu erstellen. Wir zeigen Ihnen, wie Sie den Spalten, die den Tabellencontainer überlaufen, die horizontale Bildlauffunktion hinzufügen. Außerdem fügen wir der Tabelle sogar einige horizontale Bildlaufschaltflächen hinzu, um die UX zu steigern. All dies ohne Plugin!

Lass uns anfangen.

Vorgeschmack

Hier ist ein kurzer Blick auf die responsive Tabelle mit horizontalem Scrollen, die wir in diesem Tutorial erstellen werden.

Laden Sie das Layout KOSTENLOS herunter

Um die Designs aus diesem Tutorial in die Hände zu bekommen, müssen Sie es zuerst über die Schaltfläche unten herunterladen. Um Zugang zum Download zu erhalten, müssen Sie unsere Divi Daily-E-Mail-Liste abonnieren, indem Sie das untenstehende Formular verwenden. Als neuer Abonnent erhalten Sie jeden Montag noch mehr Divi-Güte und ein kostenloses Divi-Layout-Paket! Wenn Sie bereits auf der Liste stehen, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download. Sie werden nicht „erneut abonniert“ oder erhalten zusätzliche E-Mails.

Laden Sie die Dateien herunter

Kostenlos herunterladen

Melden Sie sich beim Divi-Newsletter an und wir senden Ihnen eine Kopie des ultimativen Divi-Landing-Page-Layout-Pakets sowie jede Menge anderer fantastischer und kostenloser Divi-Ressourcen, Tipps und Tricks per E-Mail zu. Folgen Sie mit und Sie werden in kürzester Zeit ein Divi-Meister. Wenn Sie bereits abonniert sind, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download, um auf das Layout-Paket zuzugreifen.

HERUNTERLADEN

Sie haben sich erfolgreich abonniert. Bitte überprüfen Sie Ihre E-Mail-Adresse, um Ihr Abonnement zu bestätigen und Zugang zu kostenlosen wöchentlichen Divi-Layout-Paketen zu erhalten!

Um das Abschnittslayout in Ihre Divi-Bibliothek zu importieren, navigieren Sie zur Divi-Bibliothek.

Klicken Sie auf die Schaltfläche Importieren.

Wählen Sie im Portabilitäts-Popup die Registerkarte Import und wählen Sie die Download-Datei von Ihrem Computer.

Klicken Sie dann auf die Schaltfläche Importieren.

Sobald dies erledigt ist, wird das Abschnittslayout im Divi Builder verfügbar sein.

Kommen wir zum Tutorial, ja?

Was Sie brauchen, um loszulegen

Um zu beginnen, müssen Sie Folgendes tun:

1. Falls noch nicht geschehen, installieren und aktivieren Sie das Divi-Theme.
2. Erstellen Sie eine neue Seite in WordPress und verwenden Sie den Divi Builder, um die Seite im Frontend zu bearbeiten (visueller Builder).
3. Wählen Sie die Option „Von Grund auf neu erstellen“.

Danach haben Sie eine leere Leinwand, um mit dem Entwerfen in Divi zu beginnen.

Erstellen einer responsiven Tabelle mit horizontalem Scrollen

Teil 1: Erstellen der Tabellenspalten

Für dieses Tabellendesign erstellen wir unsere Tabellenspalten mit Zeilen. Dazu verwenden wir die Flex-Eigenschaft (benutzerdefiniertes CSS), um die Zeilen wie Spalten horizontal auszurichten.

Abschnittseinstellungen aktualisieren

Öffnen Sie vor dem Hinzufügen einer Zeile die Abschnittseinstellungen des standardmäßigen regulären Abschnitts und fügen Sie das folgende benutzerdefinierte CSS zum Hauptelement hinzu:

display:flex;
overflow-y:scroll !important;

Dies erzwingt den horizontalen Überlauf des Abschnitts, um eine Scroll-Funktionalität zu haben, und gibt uns die Flex-Eigenschaft, die erforderlich ist, um unsere Zeilen horizontal statt vertikal zu organisieren.

Zeile hinzufügen

Nachdem das Abschnitts-CSS eingerichtet wurde, erstellen Sie eine einspaltige Zeile innerhalb des Abschnitts.

Zeileneinstellungen

Öffnen Sie die Zeileneinstellungen und aktualisieren Sie Folgendes:

• Dachrinnenbreite: 1
• Breite: 100%

Dadurch wird sichergestellt, dass unsere Tabellenspalten keinen zusätzlichen Rand zwischen den Textmodulen haben, die wir für unsere Tabellenelemente hinzufügen.

Dann geben Sie der Zeile wie folgt einen rechten Rand:

• Breite des rechten Rands: 1px
• Farbe des rechten Rands: #cccccc

Aktualisieren Sie dann die Polsterung:

• Padding: 0px oben, 0px unten

Weisen Sie der Zeile auf der Registerkarte "Erweitert" wie folgt eine benutzerdefinierte CSS-Klasse zu:

• CSS-Klasse: et-scroll-table-column

Wir werden dies später für den benutzerdefinierten Code benötigen.

Tabellenelemente mit Textbausteinen erstellen

Um die Tabellenelemente innerhalb jeder Zeile (oder Tabellenspalte) zu erstellen, verwenden wir Textmodule.

Textmodul hinzufügen

Textinhalt

Fügen Sie als Nächstes den Text „Table Item“ zum Hauptinhalt des Textmoduls hinzu.

Textdesign

Aktualisieren Sie auf der Registerkarte "Design" Folgendes:

• Textausrichtung: Mitte
• Höhe: 80px

• Breite des rechten Rands: 1px
• Farbe des unteren Rands: #cccccc

Dieser Rand entspricht dem rechten Rand der Zeile.

Text-CSS

Um sicherzustellen, dass der Text innerhalb des Moduls vertikal und horizontal zentriert bleibt, fügen Sie das folgende CSS zum Hauptelement auf der Registerkarte „Erweitert“ hinzu:

display:flex;
align-items:center;
justify-content: center;

Doppeltes Textmodul für mehr Tabellenelemente

Nachdem unser erstes Tabellenelement erstellt wurde, duplizieren Sie das Textmodul (so oft wie nötig), um zusätzliche Tabellenelemente innerhalb der Zeile zu erstellen.

Erstellen der Überschrift der Tabellenspalte

Wir müssen das oberste Textmodul in die Überschrift der Tabellenspalte umwandeln. Öffnen Sie dazu die Einstellungen des obersten Textbausteins, aktualisieren Sie die Beschriftung in der Ebenenansicht auf „Überschrift“ und fügen Sie den Text „Überschrift“ mit dem Fließtext hinzu.

Aktualisieren Sie dann die Hintergrundfarbe.

• Hintergrund: #333333

Und aktualisieren Sie das Design des Textes wie folgt:

• Schriftstärke des Textes: Fett
• Textschriftart: TT
• Text Textfarbe: #ffffff

Duplizieren Sie die Zeile für weitere Tabellenspalten

Nachdem die erste Zeile nun vollständig ist, können wir die Zeile duplizieren, um so viele Tabellenspalten wie nötig für die Tabelle zu erstellen. Für dieses Design werden wir die Zeile achtmal duplizieren, um insgesamt neun Zeilen zu erstellen.

Teil 2: Entwerfen der Sticky Table-Spalte mit vertikalen Überschriften

Die Zeile ganz links (oder erste Zeile) dient als vertikale Überschrift für unsere Tabelle. Zuerst müssen wir den Zeilenhintergrund und jedes der Textmodule aktualisieren, damit sie das gleiche Design haben wie die Überschriften oben in jeder Spalte. Dann machen wir die gesamte Zeile klebend, damit sie an Ort und Stelle bleibt, wenn der Benutzer horizontal scrollt, um ausgeblendete Tabellenspalten anzuzeigen.

Zeilenhintergrund aktualisieren

Öffnen Sie dazu die Einstellungen für die erste Zeile und aktualisieren Sie die Hintergrundfarbe:

• Hintergrundfarbe: #333333

Textbausteine ​​aktualisieren

Öffnen Sie dann die Einstellungen für den obersten Textbaustein, der die Überschrift enthält. Klicken Sie mit der rechten Maustaste auf die Textoptionsgruppe und wählen Sie Textstile erweitern. Wählen Sie im Popup-Fenster Stile erweitern die Stile des Textes auf Alle Texte in dieser Spalte aus . Klicken Sie dann auf die Schaltfläche Erweitern.

Wählen Sie dann alle Textmodule innerhalb der Zeile mehrfach aus (halten Sie Strg (oder cmd) gedrückt und klicken Sie auf jedes einzelne) und aktualisieren Sie den Textinhalt mit dem Text „Überschrift“.

Logo hinzufügen

Da wir die oberste Überschrift in dieser Spalte nicht benötigen, fügen wir der Tabelle ein Logo hinzu.

Öffnen Sie die Einstellungen für den obersten Textbaustein in der ersten Zeile.

Löschen Sie dann den Textkörper.

Fügen Sie dann das Logo (achten Sie darauf, dass es etwa 40 x 40 Pixel groß ist) als Hintergrundbild hinzu. Stellen Sie sicher, dass die Hintergrundbildgröße auf „Tatsächliche Größe“ eingestellt ist.

Die Zeile mit den vertikalen Überschriften klebrig machen

Um die Zeile festzuhalten, fügen Sie das folgende benutzerdefinierte CSS zum Hauptelement hinzu:

min-width: 150px;
position: -webkit-sticky !important;
position: sticky !important;
left: 0;

(Sie können alle angezeigten Codefehler ignorieren, indem Sie die sticky-Eigenschaft verwenden.)

Um sicherzustellen, dass die Sticky-Reihe über den anderen Reihen sichtbar bleibt, aktualisieren Sie den Z-Index:

• Z-Index: 13

Teil 3: Aktualisieren des Abschnitts der Tabelle

Nachdem alle Tabellenelemente vorhanden sind, können wir den Abschnitt (den Tabellencontainer) mit einer bestimmten Größe und einem Überlauf aktualisieren.

Öffnen Sie die Abschnittseinstellungen und fügen Sie eine Hintergrundfarbe hinzu:

• Hintergrundfarbe: #ffeaef

Aktualisieren Sie dann die Größe und den Abstand wie folgt:

• Breite: 100%
• Maximale Breite: 900px
• Rand: 10vh oben
• Padding: 0px oben, 0px unten

Fügen Sie dann die folgende CSS-Klasse hinzu:

• CSS-Klasse: et-scroll-table

Und aktualisieren Sie den Überlauf:

• Horizontaler Überlauf: Scrollen
• Vertikaler Überlauf: Versteckt

(Hinweis: Wir haben dem Abschnitt bereits „overflow:scroll“ als benutzerdefiniertes CSS hinzugefügt, damit die Scroll-Funktionalität auch im visuellen Builder wirksam ist.)

Teil 4: Hinzufügen der horizontalen Bildlauftasten

Da die horizontale Scroll-Funktionalität auf dem Desktop leicht zu erkennen ist, werden wir horizontale Scroll-Schaltflächen für eine bessere UX hinzufügen.

Abschnitt hinzufügen

Erstellen Sie dazu einen neuen regulären Abschnitt.

Öffnen Sie die Abschnittseinstellungen und entfernen Sie die Standardpolsterung:

• Padding: 0px oben, 0px unten

Zeile hinzufügen

Geben Sie dem Abschnitt eine einspaltige Zeile.

Und aktualisieren Sie die Zeileneinstellungen wie folgt:

• Dachrinnenbreite: 1
• Breite: 100%
• Maximale Breite: 900px
• Padding: 10px oben, 10px unten, 10px rechts

Erstellen Sie die linke Bildlauftaste

Um die linke Bildlaufschaltfläche zu erstellen, fügen Sie der Spalte/Zeile ein Klappenmodul hinzu.

Nehmen Sie den Standardtitel und den Standardinhalt heraus und fügen Sie ein Pfeilsymbol nach links hinzu.

Aktualisieren Sie auf der Registerkarte "Design" Folgendes:

• Symbolfarbe: #333333
• Bild-/Symbolausrichtung: Mitte
• Symbolschriftgröße verwenden: JA
• Symbolschriftgröße: 40px
• Inhaltsbreite: 100%
• Breite: 50px

Dann geben Sie dem Klappentext eine CSS-Klasse:

• CSS-Klasse: et-scroll-left

Dies ist notwendig, um später mit unserem Code die Scroll-on-Click-Funktionalität zum Klappentext / zur Schaltfläche hinzuzufügen.

Erstellen Sie die rechte Bildlauftaste

Um die rechte Bildlaufschaltfläche zu erstellen, duplizieren Sie den Klappentext und aktualisieren Sie das Symbol mit einem Rechtspfeil.

Aktualisieren Sie dann die CSS-Klasse:

• CSS-Klasse: et-scroll-right

Um die Schaltfläche horizontal auszurichten, öffnen Sie die Einstellung für die Spalte und fügen Sie das folgende benutzerdefinierte CSS hinzu:

display:flex;
justify-content:flex-end;

Teil 5: Hinzufügen des benutzerdefinierten Codes

Für den letzten Teil dieses Tutorials müssen wir das CSS hinzufügen, das benötigt wird, um eine Mindestbreite für die Zeilen (die eigentlich unsere Tabellenspalten sind) festzulegen, und den JS-Code, der benötigt wird, um die Scroll-Funktionalität zu den Schaltflächen hinzuzufügen.

Um den Code hinzuzufügen, fügen Sie ein Codemodul unter dem zweiten Klappentext hinzu.

Fügen Sie in das Codefeld das folgende CSS ein und stellen Sie sicher, dass der Code in die erforderlichen Style- Tags eingeschlossen ist.

.et-scroll-left:hover, .et-scroll-right:hover{
cursor:pointer;
}
.et-scroll-table-column {
min-width: 150px;
}

@media all and (max-width: 980px) {
.et-scroll-table::-webkit-scrollbar {
display: none;
}
.et-scroll-table {
-webkit-overflow-scrolling: touch; 
-ms-overflow-style: -ms-autohiding-scrollbar; 
}
}

Fügen Sie unter dem CSS-Code die folgende jQuery ein und achten Sie darauf, den Code mit den erforderlichen Skript- Tags zu umschließen.

(function($) {
$(document).ready(function(){
var $scrollTable = $(".et-scroll-table");
var $rightButton = $(".et-scroll-right");
var $leftButton = $(".et-scroll-left");
var singleColumnWidth = $(".et-scroll-table-column").width();
var scrollByColumnNumber = (singleColumnWidth + 1) * 2;

$rightButton.click(function () {
$scrollTable.animate({scrollLeft: "+=" + scrollByColumnNumber}, 300);
});
$leftButton.click(function () {
$scrollTable.animate({scrollLeft: "-=" + scrollByColumnNumber}, 300);
});
});
})( jQuery );

Aktualisieren der Spaltenbreite

Wenn Sie die Mindestbreite jeder Tabellenspalte aktualisieren möchten, können Sie den Wert der Mindestbreite im CSS ändern.

Aktualisieren der Spaltenanzahl beim Scrollen

Derzeit wird durch Klicken auf die Schaltflächen horizontal (nach links oder rechts) um einen Abstand von zwei Spaltenbreiten gescrollt. Um die Anzahl der Spalten beim Scrollen zu ändern, aktualisieren Sie die Zahl ganz rechts (derzeit die Zahl 2) im Wert der Variablen scrollByColumnNumber .

Abwechselnde Spaltenfarben hinzufügen

Im Moment bestimmt die Hintergrundfarbe des Abschnitts die Farbe aller Tabellenspalten (oder -zeilen). Wenn Sie für diese Spalten abwechselnde Farben erstellen möchten, verwenden Sie die Mehrfachauswahl, um jede zweite Zeile auszuwählen, und fügen Sie jeder eine weiße Hintergrundfarbe hinzu.

Endergebnis

Sehen Sie sich jetzt das Endergebnis an!

Hier ist das endgültige Design der Tabelle auf dem Desktop.

Und hier ist die horizontale Scroll-Funktionalität auf Desktops und Mobilgeräten.

Abschließende Gedanken

Egal wie weit wir in der Welt des Webdesigns kommen, Tabellen scheinen immer ihren Platz zu haben. Sie bieten weiterhin eine wertvolle Lösung, um Inhalte so zu organisieren, dass die Benutzer sie verstehen. Dieser Tisch mit horizontalem Scrollen sollte sich für eine Vielzahl von Anwendungsfällen als nützlich erweisen. Und, vielleicht das Beste, Sie können den Tabelleninhalt aktualisieren (über den integrierten Inline-Editor von Divi) und die Tabelle mit dem Visual Builder auf unzählige kreative Arten gestalten.

Weitere Informationen zum Erstellen von responsiven Tabellen in WordPress finden Sie in unserem Beitrag zum Erstellen von responsiven Tabellen in WordPress.

Ich freue mich von Ihnen in den Kommentaren zu hören.

Danke schön!