Trik Membuat Tabel Responsive Agar Tampilan Blog Makin Sip

Membuat tabel responsive pada blog sebenarnya sangatlah mudah. Namun masih belum banyak blogger yang tahu masalah ini. Bahkan mungkin sebagian blogger enggan membuat tabel dalam postingannya karena secara default tabel tidak bersifat responsive. Wajar saja hal ini terjadi, mengingat tabel yang tidak responsive bisa merusak tampilan blog yang template-nya sudah responsive. Terkadang tabel yang mempunyai kolom yang banyak akan menyebabkan tabel melebar melebihi lebar template blog, sehingga tampilannya menjadi kurang rapi.

Untuk mengatasi hal itu terjadi pada blog sobat, saya sudah menyiapkan beberapa trik membuat tabel responsive yang bisa sobat pilih sesuai dengan selera dan sesuai dengan template yang sobat pakai.

1. Scroll ke samping

Pada saat lebar tabel tidak melebihi lebar template maka tabel akan terlihat normal. Namun ketika lebar tabel sudah melebihi lebar template maka tabel yang lebih tersebut tidak tampil/disembunyikan, sehingga ada kolom yang tidak akan tampil. Tetapi tetap bisa di-scroll ke kanan/kiri sehingga seluruh kolom tabel bisa dilihat.

Caranya cukup mudah, hanya dengan menambahkan element div diluar tabel sehingga kode HTML nya menjadi seperti ini

<div class="table-responsive">
  <table>
    ....
  </table>
</div>

Sobat bisa melihat hasilnya disini.

2. Flip Scroll

Dengan menggunakan cara ini maka tabel akan dirubah menjadi :

kolom menjadi baris dan baris akan menjadi kolom, dan bisa di-scroll juga

Bingung? hehehe.. coba lihat gambar ini

Sudah paham kan? Ga pake tags html khusus kok, cukup pake CSS aja. Hasilnya bisa dilihat disini ya..

3. Bukan lagi tabel

Lho, maksdunya bagaimana? Kok bukan tabel? Hehehe sabar sabar.. Jadi maksudnya adalah jika dibuka di perangkat mobile tampilan tabelnya tidak seperti tabel lagi. Makin bingung toh? 🙂

Ya sudah langsung lihat hasilnya saja disini. Tapi harus diperhatikan ya kalau ada tags khusus yang harus dituliskan pada saat membuat tabel, yaitu :

<td data-title="Header 1">row cell</td>

Ada tambahan data-title="Header 1" pada tags td.

Ingin memakai ketiganya? Silahkan sobat kreasikan sendiri caranya.

Demikian trik dari saya mengenai cara membuat tabel responsive pada blog. Semoga bermanfaat buat sobat blogger semua. Selamat mencoba..