Jak stworzyć responsywną tabelę z poziomym przewijaniem w Divi

Tworzenie responsywnej tabeli może być wyzwaniem, zwłaszcza jeśli masz tabelę z dużą ilością kolumn. Świetnym sposobem rozwiązania tego problemu jest dodanie do tabeli funkcji przewijania w poziomie. Tabela z przewijaniem w poziomie rozwiązuje dwa główne problemy. Po pierwsze, pozwala projektantowi zachować odstępy niezbędne dla zawartości tabeli (naprawdę wąskie kolumny spowodują, że zawartość będzie się zbytnio zbijać). Po drugie, umożliwia użytkownikowi przeglądanie czytelnej zawartości tabeli na urządzeniach mobilnych.

W tym samouczku pokażemy, jak za pomocą Divi zbudować całkowicie niestandardową tabelę z przewijaniem w poziomie. Pokażemy, jak dodać funkcję przewijania w poziomie do kolumn, które przepełniają kontener tabeli. Dodatkowo dodamy nawet kilka poziomych przycisków przewijania do tabeli, aby poprawić UX. Wszystko to bez wtyczki!

Zacznijmy.

zapowiedź

Oto krótkie spojrzenie na responsywną tabelę z przewijaniem w poziomie, którą zbudujemy w tym samouczku.

Pobierz układ za DARMO

Aby położyć swoje ręce na projektach z tego samouczka, najpierw musisz go pobrać za pomocą przycisku poniżej. Aby uzyskać dostęp do pobrania, musisz zapisać się na naszą listę e-mailową Divi Daily, korzystając z poniższego formularza. Jako nowy subskrybent otrzymasz jeszcze więcej dobroci Divi i darmowy pakiet Divi Layout w każdy poniedziałek! Jeśli jesteś już na liście, po prostu wpisz poniżej swój adres e-mail i kliknij pobierz. Nie będziesz „ponownie subskrybować” ani otrzymywać dodatkowych wiadomości e-mail.

Pobierz pliki

Pobierz za darmo

Dołącz do biuletynu Divi, a wyślemy Ci e-mailem kopię najlepszego pakietu układu strony docelowej Divi, a także mnóstwo innych niesamowitych i bezpłatnych zasobów, wskazówek i sztuczek Divi. Idź dalej, a w mgnieniu oka zostaniesz mistrzem Divi. Jeśli masz już subskrypcję, wpisz poniżej swój adres e-mail i kliknij Pobierz, aby uzyskać dostęp do pakietu układów.

POBIERANIE

Udało Ci się zasubskrybować. Sprawdź swój adres e-mail, aby potwierdzić subskrypcję i uzyskać dostęp do bezpłatnych cotygodniowych pakietów układów Divi!

Aby zaimportować układ sekcji do Biblioteki Divi, przejdź do Biblioteki Divi.

Kliknij przycisk Importuj.

W wyskakującym okienku przenośności wybierz zakładkę importu i wybierz plik do pobrania z komputera.

Następnie kliknij przycisk importu.

Po zakończeniu układ sekcji będzie dostępny w Divi Builder.

Przejdźmy do samouczka, dobrze?

Czego potrzebujesz, aby zacząć

Aby rozpocząć, musisz wykonać następujące czynności:

1. Jeśli jeszcze tego nie zrobiłeś, zainstaluj i aktywuj motyw Divi.
2. Utwórz nową stronę w WordPress i użyj Divi Builder, aby edytować stronę w interfejsie (konstruktor wizualny).
3. Wybierz opcję „Buduj od podstaw”.

Następnie będziesz mieć puste płótno, aby rozpocząć projektowanie w Divi.

Tworzenie responsywnej tabeli z przewijaniem w poziomie

Część 1: Budowanie kolumn stołowych

W przypadku tego projektu tabeli utworzymy nasze kolumny tabeli za pomocą wierszy. Aby to zrobić, użyjemy właściwości flex (niestandardowy CSS), aby wyrównać wiersze poziomo jak kolumny.

Aktualizuj ustawienia sekcji

Przed dodaniem wiersza otwórz ustawienia sekcji domyślnej zwykłej sekcji i dodaj następujący niestandardowy kod CSS do elementu głównego:

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

Zmusi to poziome przepełnienie sekcji do funkcji przewijania, a także zapewni nam właściwość flex potrzebną do uporządkowania naszych wierszy poziomo zamiast pionowo.

Dodaj wiersz

Teraz, gdy sekcja CSS jest na swoim miejscu, utwórz jednokolumnowy wiersz w sekcji.

Ustawienia wiersza

Otwórz ustawienia wiersza i zaktualizuj następujące elementy:

• Szerokość rynny: 1
• Szerokość: 100%

Dzięki temu nasze kolumny tabeli nie będą miały żadnego dodatkowego marginesu między modułami tekstowymi, które dodamy dla naszych elementów tabeli.

Następnie nadaj rzędowi prawą krawędź w następujący sposób:

• Szerokość prawego obramowania: 1px
• Kolor prawego obramowania: #cccccc

Następnie zaktualizuj dopełnienie:

• Padding: 0px na górze, 0px na dole

Na karcie Zaawansowane nadaj wierszowi niestandardową klasę CSS w następujący sposób:

• Klasa CSS: et-scroll-table-column

Będzie nam to potrzebne później w kodzie niestandardowym.

Tworzenie elementów tabeli za pomocą modułów tekstowych

Aby utworzyć elementy tabeli w każdym wierszu (lub kolumnie tabeli), użyjemy modułów tekstowych.

Dodaj moduł tekstowy

Treść tekstowa

Następnie dodaj tekst „Element tabeli” do treści treści modułu tekstowego.

Projekt tekstu

Na karcie projekt zaktualizuj następujące elementy:

• Wyrównanie tekstu: do środka
• Wysokość: 80px

• Szerokość prawego obramowania: 1px
• Kolor dolnej krawędzi: #cccccc

Ta granica będzie pasować do prawej krawędzi rzędu.

Tekst CSS

Aby upewnić się, że tekst w module pozostaje wyśrodkowany w pionie i poziomie, dodaj następujący kod CSS do elementu głównego w zakładce Zaawansowane:

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

Zduplikowany moduł tekstowy dla większej liczby elementów tabeli

Teraz, gdy nasz pierwszy element tabeli został utworzony, zduplikuj moduł tekstowy (tyle razy, ile potrzeba), aby utworzyć dodatkowe elementy tabeli w wierszu.

Tworzenie nagłówka kolumny tabeli

Musimy zmienić najwyższy moduł tekstowy w nagłówek kolumny tabeli. Aby to zrobić, otwórz ustawienia górnego modułu tekstowego, zaktualizuj etykietę w widoku Warstwy na „Nagłówek” i dodaj tekst „Nagłówek” z treścią treści.

Następnie zaktualizuj kolor tła.

• Tło: #333333

I zaktualizuj projekt tekstu w następujący sposób:

• Grubość czcionki tekstu: pogrubiona
• Styl czcionki tekstu: TT
• Kolor tekstu: #ffffff

Powiel wiersz, aby uzyskać więcej kolumn tabeli

Teraz, gdy pierwszy wiersz jest gotowy, możemy go zduplikować, aby utworzyć tyle kolumn tabeli, ile potrzeba dla tabeli. W tym projekcie zduplikujemy wiersz osiem razy, aby utworzyć łącznie dziewięć wierszy.

Część 2: Projektowanie lepkiej kolumny tabeli z nagłówkami pionowymi

Wiersz po lewej stronie (lub pierwszy wiersz) posłuży jako pionowe nagłówki naszej tabeli. Najpierw musimy zaktualizować tło wiersza i każdy z modułów tekstowych, aby miały taki sam wygląd, jak nagłówki u góry każdej kolumny. Następnie sprawimy, że cały wiersz będzie lepki, aby pozostał na miejscu, gdy użytkownik przewija w poziomie, aby wyświetlić ukryte kolumny tabeli.

Zaktualizuj tło wiersza

Aby to zrobić, otwórz ustawienia pierwszego rzędu i zaktualizuj kolor tła:

• Kolor tła: #333333

Zaktualizuj moduły tekstowe

Następnie otwórz ustawienia dla górnego modułu tekstowego zawierającego nagłówek. Kliknij prawym przyciskiem myszy grupę opcji tekstu i wybierz opcję Rozszerz style tekstu. W wyskakującym okienku Rozszerz style wybierz rozszerzenie stylów tekstu na Wszystkie teksty w tej kolumnie . Następnie kliknij przycisk Rozszerz.

Następnie zaznacz wiele modułów tekstowych w wierszu (przytrzymaj ctrl (lub cmd) i kliknij każdy z nich) i zaktualizuj treść treści tekstem „Nagłówek”.

Dodaj logo

Ponieważ nie potrzebujemy nagłówka na samej górze w tej kolumnie, dodamy logo do tabeli.

Otwórz ustawienia dla najwyższego modułu tekstowego w pierwszym wierszu.

Następnie usuń treść.

Następnie dodaj logo (upewnij się, że ma około 40 na 40 pikseli) jako obraz tła. Upewnij się, że rozmiar obrazu tła jest ustawiony na „Rozmiar rzeczywisty”.

Przyklejanie pionowych nagłówków

Aby wiersz był przyklejony, dodaj następujący niestandardowy kod CSS do elementu głównego:

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

(Możesz zignorować wszystkie błędy kodu, które zostaną wyświetlone, używając właściwości sticky).

Aby upewnić się, że przyklejony wiersz pozostaje widoczny nad innymi wierszami, zaktualizuj indeks Z:

• Indeks Z: 13

Część 3: Aktualizacja sekcji tabeli

Teraz, gdy wszystkie elementy tabeli są na swoim miejscu, możemy zaktualizować sekcję (kontener tabeli) o określony rozmiar i przepełnienie.

Otwórz ustawienia sekcji i dodaj kolor tła:

• Kolor tła: #ffeaef

Następnie zaktualizuj rozmiar i odstępy w następujący sposób:

• Szerokość: 100%
• Maksymalna szerokość: 900px
• Marża: górna 10vh
• Padding: 0px na górze, 0px na dole

Następnie dodaj następującą klasę CSS:

• Klasa CSS: et-scroll-table

I zaktualizuj przepełnienie:

• Przepełnienie poziome: Przewiń
• Przepełnienie pionowe: ukryte

(Uwaga: mamy już „przepełnienie: przewijanie” dodane do sekcji jako niestandardowy CSS, aby funkcja przewijania działała również w kreatorze wizualnym).

Część 4: Dodawanie poziomych przycisków przewijania

Ponieważ funkcja przewijania w poziomie jest łatwo widoczna na komputerach stacjonarnych, dodamy przyciski przewijania w poziomie dla lepszego UX.

Dodaj sekcję

Aby to zrobić, utwórz nową zwykłą sekcję.

Otwórz ustawienia sekcji i wyjmij domyślne wypełnienie:

• Padding: 0px na górze, 0px na dole

Dodaj wiersz

Daj sekcji wiersz w jednej kolumnie.

I zaktualizuj ustawienia wiersza w następujący sposób:

• Szerokość rynny: 1
• Szerokość: 100%
• Maksymalna szerokość: 900px
• Padding: 10px góra, 10px dół, 10px prawo

Utwórz lewy przycisk przewijania

Aby utworzyć lewy przycisk przewijania, dodaj moduł notki do kolumny/wiersza.

Usuń domyślny tytuł i treść i dodaj ikonę strzałki w lewo.

Na karcie projekt zaktualizuj następujące elementy:

• Kolor ikony: #333333
• Wyrównanie obrazu/ikony: środek
• Użyj rozmiaru czcionki ikony: TAK
• Rozmiar czcionki ikony: 40px
• Szerokość treści: 100%
• Szerokość: 50px

Następnie nadaj notce klasę CSS:

• Klasa CSS: et-scroll-left

Jest to konieczne, aby później dodać funkcję przewijania po kliknięciu do notki/przycisku z naszym kodem.

Utwórz prawy przycisk przewijania

Aby utworzyć prawy przycisk przewijania, zduplikuj notkę i zaktualizuj ikonę strzałką w prawo.

Następnie zaktualizuj klasę CSS:

• Klasa CSS: et-scroll-right

Aby wyrównać przycisk w poziomie, otwórz ustawienie kolumny i dodaj następujący niestandardowy kod CSS:

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

Część 5: Dodawanie niestandardowego kodu

W końcowej części tego samouczka musimy dodać CSS potrzebny do ustawienia minimalnej szerokości wierszy (które w rzeczywistości są naszymi kolumnami tabeli) oraz kod JS potrzebny do dodania funkcji przewijania do przycisków.

Aby dodać kod, dodaj moduł kodu pod drugą notką.

W polu kodu wklej następujący kod CSS, upewniając się, że kod jest zawinięty w niezbędne tagi stylu .

.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; 
}
}

Pod kodem CSS wklej następujący kod jQuery, upewniając się, że kod jest owinięty niezbędnymi tagami skryptu .

(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 );

Aktualizacja szerokości kolumny

Jeśli chcesz zaktualizować minimalną szerokość każdej kolumny tabeli, możesz zmienić wartość minimalnej szerokości w CSS.

Aktualizowanie liczby kolumn na przewijaniu

Obecnie kliknięcie przycisków spowoduje przewijanie w poziomie (w lewo lub w prawo) o odległość równą dwóm szerokościom kolumn. Aby zmienić liczbę kolumn podczas przewijania, zaktualizuj skrajną prawą liczbę (obecnie liczbę 2) w wartości zmiennej scrollByColumnNumber .

Dodawanie naprzemiennych kolorów kolumn

Obecnie kolor tła sekcji określa kolor wszystkich kolumn (lub wierszy) tabeli. Jeśli chcesz utworzyć naprzemienne kolory dla tych kolumn, użyj funkcji wielokrotnego wyboru, aby wybrać co drugi wiersz i dodać do każdego z nich biały kolor tła.

Ostateczny wynik

Teraz sprawdź efekt końcowy!

Oto ostateczny projekt stołu na pulpicie.

A oto funkcja przewijania w poziomie na komputerach i urządzeniach mobilnych.

Końcowe przemyślenia

Bez względu na to, jak daleko zajdziemy w świecie projektowania stron internetowych, stoły zawsze wydają się mieć swoje miejsce. Nadal zapewniają cenne rozwiązanie do porządkowania treści w sposób zrozumiały dla użytkowników. Ta tabela z przewijaniem w poziomie powinna być przydatna w szerokim zakresie zastosowań. I, być może, najlepszą częścią, możesz zaktualizować zawartość tabeli (za pomocą wbudowanego edytora Divi) i stylizować tabelę na niezliczone kreatywne sposoby za pomocą wizualnego kreatora.

Aby uzyskać więcej informacji na temat tworzenia responsywnych tabel w WordPress, zapoznaj się z naszym wpisem Jak tworzyć responsywne tabele w WordPress.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!