Membuat Horizontal Scroll Bar sebagai Solusi untuk Tabel di Wordpress Responsive Themes

Beberapa hari ini, saya disibukkan dengan aktivitas perubahan bentuk blog dari fixed layout ke responsive layout. Menurut google, website-website yang tidak cocok dengan mobile atau istilah "tidak mobile friendly" ini akan pelan-pelan dihilangkan dalam pencarian google, terutama pada pencarian mobile google. Hal ini bertujuan untuk meningkatkan kenyamanan penggunaan Smartphone dalam browsing pencarian informasi. Diantara beberapa blog yang saya tekuni, terdapat 3 blog yang masih fixed layout, sehingga saya harus mencari Themes Wordpress yang responsive agar tetap bisa mendapatkan pengunjung yang berasal dari Mobile seperti Smartphone maupun Tablet. Akhirnya pilihan saya jatuh pada salah satu Themes Wordpress Responsive yang premium alias harus membayar untuk mendapatkannya.

Dengan semangat saya melakukan instalasi dan setting agar Blog saya tampil dengan cantik dihadapan para pengunjung. Tetapi dalam proses penyesuaiannya, tiba-tiba saya menemukan satu masalah yang cukup fatal yaitu tabel yang biasanya tampil gagah di Themes Fixed Layout menjadi hanya muncul setengahnya saja di Smartphone. Tabel yang berjumlah 6 kolom hanya tampil 3 Kolom dan 3 kolom lainnya tidak tampil atau hilang di pandangan mata.
Saya rasa banyak teman-teman yang menggunakan Themes Wordpress yang Responsive pasti juga mengalami hal yang sama.
Oleh karena itu, di kesempatan ini saya ingin berbagi mengenai salah satu cara untuk mengatasi permasalahan diatas yaitu dengan cara menggunakan Horizontal Scroll bar pada tabel yang akan digunakan di Responsive Themes Wordpress.

Cara Membuat Horizontal Scroll Bar untuk Wordpress Responsive Themes.

Untuk membuat Horizontal Scroll bar pada Tabel di Responsive Wordpress Themes, diperlukan dua langkah utama yaitu dengan menambahkan beberapa kode pada CSS Stylesheet Editor dan juga pada Text Editor posting kita.

CSS Stylesheet Edit

1. Masuk ke Dashboard Wordpress Blog anda
2. Klik [Appearance]
3. Klik [Edit CSS]

4. Kemudian copy dan paste kode dibawah ini kedalam CSS Stylesheet Editor :

.table-container

{
width: 100%;
overflow-y: auto;
_overflow: auto;
margin: 0 0 1em;
}

5. Klik [Save Stylesheet]

Text Editor Posting

Setelah masukkan kode kedalam CSS Stylesheet Editor, langkah berikutnya adalah masukan kode HTML diatas dan dibawah Tabel pada Text Editor.
1. Masuk ke Posting yang tabel-nya ingin ditambahkan Scroll Horizontalnya.
2. Klik [Text] pada editor artikel

3. Cari tulisan <table> kemudian letakan kode HTML dibawah ini diatasnya :

<div class="table-container">

4. Selanjutnya cari lagi tulisan </table> kemudian letakan kode HTML dibawah ini pada posisi bawahnya :

</div>

Contoh seperti dibawah ini :

5. Klik [Save] atau [Update] untuk menyimpan artikel anda.

Hasilnya daripada penambahan Horizontal scroll bar akan berbentuk seperti dibawah ini :

Demikan cara untuk meletakan Horizontal Scroll Bar pada Tabel di Themes Wordpress yang Responsive sebagai salah satu cara untuk mengatasi sebagian tabel tidak muncul di Themes Responsive tersebut.
Semoga bermanfaat dan Selamat Mencoba ....