Cara Membuat Tabel Responsif dengan Horizontal Scroll di Divi

Membuat tabel responsif bisa menjadi tantangan, terutama jika Anda memiliki tabel dengan banyak kolom. Cara yang bagus untuk mengatasi masalah ini adalah dengan menambahkan kemampuan gulir horizontal ke tabel. Tabel dengan gulir horizontal memecahkan dua masalah utama. Pertama, ini memungkinkan perancang untuk menjaga jarak yang diperlukan untuk konten tabel (kolom yang sangat sempit akan menyebabkan konten terlalu banyak tercampur). Dan kedua, ini memungkinkan pengguna untuk melihat konten tabel yang mudah dibaca di perangkat seluler.

Dalam tutorial ini, kami akan menunjukkan kepada Anda cara menggunakan Divi untuk membuat tabel yang sepenuhnya dapat disesuaikan dengan gulir horizontal. Kami akan menunjukkan cara menambahkan fungsionalitas gulir horizontal ke kolom yang memenuhi wadah tabel. Plus, kami bahkan akan menambahkan beberapa tombol gulir horizontal ke tabel untuk meningkatkan UX. Semua ini tanpa plugin!

Mari kita mulai.

Sneak Peek

Berikut adalah tampilan cepat pada tabel responsif dengan scroll horizontal yang akan kita buat dalam tutorial ini.

Unduh Tata Letaknya GRATIS

Untuk mendapatkan desain dari tutorial ini, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah. Untuk mendapatkan akses ke unduhan, Anda harus berlangganan daftar email Divi Daily kami dengan menggunakan formulir di bawah ini. Sebagai pelanggan baru, Anda akan menerima lebih banyak kebaikan Divi dan paket Tata Letak Divi gratis setiap hari Senin! Jika Anda sudah ada dalam daftar, cukup masukkan alamat email Anda di bawah ini dan klik unduh. Anda tidak akan "berlangganan ulang" atau menerima email tambahan.

Unduh File

Unduh Gratis

Bergabunglah dengan Divi Newsletter dan kami akan mengirimkan email kepada Anda salinan Paket Tata Letak Halaman Arahan Divi terbaik, ditambah banyak sumber daya, tip, dan trik Divi yang luar biasa dan gratis. Ikuti dan Anda akan menjadi master Divi dalam waktu singkat. Jika Anda sudah berlangganan cukup ketik alamat email Anda di bawah ini dan klik unduh untuk mengakses paket tata letak.

UNDUH

Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan dapatkan akses ke paket tata letak Divi mingguan gratis!

Untuk mengimpor tata letak bagian ke Perpustakaan Divi Anda, navigasikan ke Perpustakaan Divi.

Klik tombol Impor.

Di popup portabilitas, pilih tab impor dan pilih file unduhan dari komputer Anda.

Kemudian klik tombol impor.

Setelah selesai, tata letak bagian akan tersedia di Divi Builder.

Langsung saja ke tutorialnya ya?

Apa yang Anda Butuhkan untuk Memulai

Untuk memulai, Anda perlu melakukan hal berikut:

1. Jika belum, instal dan aktifkan Tema Divi.
2. Buat halaman baru di WordPress dan gunakan Divi Builder untuk mengedit halaman di bagian depan (pembuat visual).
3. Pilih opsi "Bangun Dari Awal".

Setelah itu, Anda akan memiliki kanvas kosong untuk mulai mendesain di Divi.

Membangun Tabel Responsif dengan Horizontal Scroll

Bagian 1: Membangun Kolom Tabel

Untuk desain tabel ini, kita akan membuat kolom tabel kita menggunakan baris. Untuk melakukan ini, kita akan menggunakan properti flex (CSS khusus) untuk menyelaraskan baris secara horizontal seperti kolom.

Perbarui Pengaturan Bagian

Sebelum menambahkan baris, buka pengaturan bagian dari bagian reguler default dan tambahkan CSS khusus berikut ke Elemen Utama:

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

Ini akan memaksa luapan horizontal bagian untuk memiliki fungsi gulir serta memberi kita properti flex yang diperlukan untuk mengatur baris kita secara horizontal, bukan vertikal.

Menambahkan baris

Sekarang setelah bagian CSS berada di tempatnya, buat baris satu kolom di dalam bagian tersebut.

Pengaturan Baris

Buka pengaturan baris dan perbarui yang berikut:

• Lebar Talang: 1
• Lebar: 100%

Ini akan memastikan kolom tabel kita tidak memiliki margin tambahan antara modul teks yang akan kita tambahkan untuk item tabel kita.

Kemudian beri baris batas kanan sebagai berikut:

• Lebar Batas Kanan: 1px
• Warna Tepi Kanan: #cccccc

Kemudian perbarui padding:

• Padding: 0px atas, 0px bawah

Di bawah tab lanjutan, berikan baris Kelas CSS khusus sebagai berikut:

• Kelas CSS: et-scroll-table-column

Kita akan membutuhkan ini untuk kode kustom nanti.

Membuat Item Tabel dengan Modul Teks

Untuk membuat item tabel dalam setiap baris (atau kolom tabel), kita akan menggunakan modul teks.

Tambahkan Modul Teks

Konten Teks

Selanjutnya, tambahkan teks “Item Tabel” ke isi isi modul teks.

Desain Teks

Di bawah tab desain, perbarui yang berikut ini:

• Perataan Teks: tengah
• Tinggi: 80px

• Lebar Batas Kanan: 1px
• Warna Batas Bawah: #cccccc

Batas ini akan cocok dengan batas kanan baris.

Teks CSS

Untuk memastikan teks di dalam modul tetap berada di tengah secara vertikal dan horizontal, tambahkan CSS berikut ke Elemen Utama di bawah tab lanjutan:

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

Modul Teks Duplikat untuk Item Tabel Lainnya

Sekarang item tabel pertama kita telah dibuat, duplikat modul teks (sebanyak yang diperlukan) untuk membuat item tabel tambahan di dalam baris.

Membuat Judul Kolom Tabel

Kita perlu mengubah modul teks paling atas menjadi Judul kolom tabel. Untuk melakukannya, buka pengaturan modul teks atas, perbarui label di tampilan Layers ke "Heading", dan tambahkan teks "Heading" dengan konten isi.

Kemudian perbarui warna latar belakang.

• Latar belakang: #333333

Dan perbarui desain teks sebagai berikut:

• Berat Font Teks: Tebal
• Gaya Font Teks: TT
• Warna Teks Teks: #ffffff

Gandakan Baris untuk Kolom Tabel Lainnya

Sekarang setelah baris pertama selesai, kita dapat menduplikasi baris tersebut untuk membuat kolom tabel sebanyak yang diperlukan untuk tabel tersebut. Untuk desain ini, kita akan menduplikasi baris delapan kali untuk membuat total sembilan baris.

Bagian 2: Mendesain Kolom Tabel Lengket dengan Judul Vertikal

Baris paling kiri (atau baris pertama) akan berfungsi sebagai heading vertikal untuk tabel kita. Pertama, kita perlu memperbarui latar belakang baris dan setiap modul teks sehingga memiliki desain yang sama dengan judul di bagian atas setiap kolom. Kemudian, kita akan membuat seluruh baris menjadi lengket sehingga tetap di tempatnya saat pengguna menggulir secara horizontal untuk melihat kolom tabel yang tersembunyi.

Perbarui Latar Belakang Baris

Untuk melakukan ini, buka pengaturan untuk baris pertama dan perbarui warna latar belakang:

• Warna Latar Belakang: #333333

Perbarui Modul Teks

Kemudian, buka pengaturan untuk modul teks atas yang berisi Heading. Klik kanan pada grup opsi teks dan pilih Extend Text Styles. Dalam pop-up Perpanjang Gaya, pilih untuk memperluas gaya teks ke Semua Teks di seluruh Kolom Ini . Kemudian klik tombol Perpanjang.

Kemudian multi-pilih semua modul teks di dalam baris (tahan ctrl (atau cmd) dan klik masing-masing) dan perbarui konten isi dengan teks "Heading".

Tambahkan Logo

Karena kita tidak membutuhkan heading paling atas di kolom ini, kita akan menambahkan logo ke tabel.

Buka pengaturan untuk modul teks paling atas di baris pertama.

Kemudian hapus teks isi.

Kemudian tambahkan logo (pastikan ukurannya sekitar 40px kali 40px) sebagai gambar latar belakang. Pastikan ukuran gambar latar belakang diatur ke "Ukuran Sebenarnya".

Membuat Baris Judul Vertikal Lengket

Untuk membuat baris lengket, tambahkan CSS Kustom berikut ke Elemen Utama:

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

(Anda dapat mengabaikan kesalahan kode apa pun yang akan ditampilkan dengan menggunakan properti sticky.)

Untuk memastikan baris lengket tetap terlihat di atas baris lainnya, perbarui Indeks Z:

• Indeks Z: 13

Bagian 3: Memperbarui Bagian Tabel

Sekarang setelah semua elemen tabel ada di tempatnya, kita dapat memperbarui bagian (wadah tabel) dengan ukuran dan luapan tertentu.

Buka pengaturan bagian dan tambahkan warna latar belakang:

• Warna Latar Belakang: #ffeaef

Kemudian perbarui ukuran dan spasi sebagai berikut:

• Lebar: 100%
• Lebar Maks: 900px
• Margin: 10vh atas
• Padding: 0px atas, 0px bawah

Kemudian tambahkan Kelas CSS berikut:

• Kelas CSS: et-scroll-table

Dan perbarui overflow:

• Luapan Horisontal: Gulir
• Overflow Vertikal: Tersembunyi

(Catatan: kami telah menambahkan "overflow:scroll" ke bagian sebagai CSS khusus sehingga fungsi gulir juga akan berlaku pada pembuat visual.)

Bagian 4: Menambahkan Tombol Gulir Horizontal

Karena fungsi gulir horizontal mudah terlihat di desktop, kami akan menambahkan tombol gulir horizontal untuk UX yang lebih baik.

Tambahkan Bagian

Untuk melakukan ini, buat bagian reguler baru.

Buka pengaturan bagian dan keluarkan padding default:

• Padding: 0px atas, 0px bawah

Menambahkan baris

Beri bagian itu satu baris kolom.

Dan perbarui pengaturan baris sebagai berikut:

• Lebar Talang: 1
• Lebar: 100%
• Lebar Maks: 900px
• Padding: 10px atas, 10px bawah, 10px kanan

Buat Tombol Gulir Kiri

Untuk membuat tombol gulir kiri, tambahkan modul uraian ke kolom/baris.

Keluarkan judul dan isi isi default, dan tambahkan ikon panah kiri.

Di bawah tab desain, perbarui yang berikut ini:

• Warna Ikon: #333333
• Penjajaran Gambar/Ikon: tengah
• Gunakan Ukuran Font Ikon: YA
• Ukuran Font Ikon: 40px
• Lebar Konten: 100%
• Lebar: 50px

Kemudian berikan uraian singkat Kelas CSS:

• Kelas CSS: et-scroll-left

Ini diperlukan untuk menambahkan fungsi gulir saat klik ke uraian/tombol dengan kode kita nanti.

Buat Tombol Gulir Kanan

Untuk membuat tombol gulir kanan, duplikat uraian singkat, dan perbarui ikon dengan panah kanan.

Kemudian perbarui Kelas CSS:

• Kelas CSS: et-scroll-right

Untuk menyelaraskan tombol secara horizontal, buka pengaturan untuk kolom, dan tambahkan CSS khusus berikut:

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

Bagian 5: Menambahkan Kode Kustom

Untuk bagian akhir dari tutorial ini, kita perlu menambahkan CSS yang diperlukan untuk mengatur lebar minimum untuk baris (yang sebenarnya adalah kolom tabel kita) dan kode JS yang diperlukan untuk menambahkan fungsi gulir ke tombol.

Untuk menambahkan kode, tambahkan modul kode di bawah uraian kedua.

Di kotak kode, rekatkan CSS berikut memastikan untuk membungkus kode dalam tag gaya yang diperlukan.

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

Di bawah kode CSS, rekatkan jQuery berikut dan pastikan untuk membungkus kode dengan tag skrip yang diperlukan.

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

Memperbarui Lebar Kolom

Jika Anda ingin memperbarui min-width dari setiap kolom tabel, Anda dapat mengubah nilai min-width di CSS.

Memperbarui Jumlah Kolom di Scroll

Saat ini, mengklik tombol akan menggulir secara horizontal (kiri atau kanan) dengan jarak yang sama dengan dua lebar kolom. Untuk mengubah jumlah kolom pada gulir, perbarui nomor paling kanan (saat ini nomor 2) dalam nilai variabel scrollByColumnNumber .

Menambahkan Warna Kolom Bergantian

Saat ini warna latar bagian menentukan warna semua kolom tabel (atau baris). Jika Anda ingin membuat warna bergantian untuk kolom tersebut, gunakan multi-pilih untuk memilih setiap baris lainnya dan tambahkan warna latar belakang putih ke masing-masing baris.

Hasil Akhir

Sekarang lihat hasil akhirnya!

Berikut adalah desain akhir tabel di desktop.

Dan inilah fungsi scroll horizontal di desktop dan mobile.

Pikiran Akhir

Tidak peduli seberapa jauh kita datang di dunia desain web, tabel sepertinya selalu memiliki tempatnya. Mereka terus memberikan solusi berharga untuk mengatur konten dengan cara yang dipahami pengguna. Tabel dengan gulir horizontal ini akan berguna untuk berbagai kasus penggunaan. Dan, mungkin bagian terbaiknya, Anda dapat memperbarui konten tabel (melalui editor inline bawaan Divi) dan menata tabel dengan cara kreatif yang tak terhitung jumlahnya menggunakan pembuat visual.

Untuk info lebih lanjut tentang membuat tabel responsif di WordPress, lihat posting kami di Cara Membuat Tabel Responsif di WordPress.

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!