Membuat Tabel Responsive dengan CSS Oleh: Christian Rosandhy

CSS Layout Responsive udah jadi salah satu kebutuhan wajib ya dalam pembuatan website kita.. Sama seperti layout, Table juga perlu tampilan yang responsive supaya bisa lebih enak dilihat.. Yang penasaran gimana cara buatnya, yuk langsung disimak aja.. :)

Salam jagocoding.. udah lama nggak share nih.. Kali ini saya mau share salah satu trik CSS yg akan cukup bermanfaat untuk kita yg berhadapan dengan CSS responsive. Kalau dulu saya pernah bahas CSS Responsive secara umum (Membuat Responsive Layout dengan Media Query), sekarang kita akan belajar Responsive yang diterapkan pada tabel. Cuss aja yukk.. :D Sebelum kita masuk ke Table Responsive, kita buat dulu desain tabel seperti biasanya yuk.. <meta charset="UTF-8"> <style>

Membuat Tabel Responsive

data-content="Nama">Michelle Vernesta data-content="Alamat">Jl Kenangan no 12 data-content="Telp">0361745262 data-content="Email">[email protected]

data-content="Nama">Ricky Renata Kusuma data-content="Alamat">Jl Diponegoro no 222 data-content="Telp">0831199462727 data-content="Email">[email protected]

data-content="Nama">Vincensia Ernestine data-content="Alamat">Jl Raya Sesetan no 23 data-content="Telp">083517122837 data-content="Email">[email protected]

No	Nama	Alamat	Telp	Email
1	Christian Rosandhy	Jl Raya Kenangan no 6	089666444222	[email protected]
2	Putra Darmawan	Jl Kita Bersama no 23	08152648599	[email protected]
data-content="No">3	data-content="No">4	data-content="No">5

Desain tabelnya terlihat biasa saja ya.. Tapi ada 2 hal yang perlu diperhatikan disini : Pertama, disarankan table tersebut diberikan atribut cellspacing dengan nilai 0 (defaultnya 1). Karena pendapat saya pribadi sih, tabel itu bakalan lebih cantik kalau nggak ada jarak antar selnya. Pun kita ingin kasi jarak, sebaiknya dibuat dengan CSS saja.. :D

Kedua, atribut data-content di TD itu apaan? Itu adalah atribut buatan saya sendiri (bukan atribut biasa bawaan HTML) yang nantinya akan sangat berguna dalam pembuatan Table Responsive sebagai pengganti Table Header (TH). nama atributnya bisa kita ganti sesuai keinginan kita sendiri (data-gue, nama-field, kolom, ....), tapi usahakan gunakan nama atribut yang belum didefinisikan. Masuk ke CSSnya pun sampai disini yg biasa aja dulu.. Bisa kita buat seenak jidat kita untuk tampilan tabel defaultnya. :D body{font-family:'Candara','Calibri',sans-serif;} /*daripada liat font times new roman~ :3 */ table{box-shadow:0px 0px 5px #aaa;} /*sedikit bayangan yang soft*/ table th{ padding:10px;

font-weight:bold; background:#33B4E4; color:#fff; text-transform:uppercase; } table td{ padding:10px 5px; } Sampai disini, tampilannya kira-kira seperti ini :

Yahh,, layoutnya simpel but not bad lah ya.. Gimana ya kalau window browsernya kita kecilin?

DEMMMMM.. Ternyata di device dengan lebar layar yang kecil, tabel kita tadi itu kegedean, dan harus discroll kesamping. Cukup merepotkan ya? Percuma layout dasar kita udah responsive kalau tabelnya nggak responsive kan? -_Nah, di langkah selanjutnya inilah kita akan membuat tabel responsive. Sekarang kita bermain-main di CSS saja ya.. :D

Seperti yang sudah kita lihat sendiri, tabel secara default akan dibuat menyamping. dan ini hal yang cukup menyulitkan untuk device dengan lebar yang terbatas. Artinya tabel untuk device dengan lebar yang terbatas tidak boleh menyamping seperti defaultnya, melainkan harus turun ke bawah. Sampai disini kita ketemu sedikit masalah, yaitu di Table Header (tag TH). Gimana caranya supaya tag TH bisa menurun ke bawah, dan terus mengulang isinya sampai data terakhir? Ternyata jawabannya cukup mengecewakan, NGGAK BISA.. :'( Karena keterbatasan inilah, kita perlu membuat sebuah atribut tambahan di setiap TD yang bernama data-content dengan value yang sama seperti urutan di tag TH. Nantinya, nilai atribut

data-content inilah yang akan tampil sebagai pengganti TH, karena TH tidak mungkin ditampilkan pada tabel yang menurun ke bawah. Langkah CSSnya seperti ini : 1. Seperti biasa, buat dulu CSS Media Query dengan batasan lebar device yang kita inginkan sesuai kebutuhan kita. Misalkan, kita merasa tabel tersebut tampilannya sudah jelek kalau lebar devicenya dibawah 700px. jadi saya buat 2 CSS media query seperti ini : @media (min-width:700px){ /*UNTUK DEVICE YANG LEBARNYA LEBIH DARI 700PX */ /*karena tabel kita yang tadi itu untuk device layar lebar, maka taruh saja semuanya disini...*/ table th{ padding:10px; font-weight:bold; background:#33B4E4; color:#fff; text-transform:uppercase; } table td{ padding:10px 5px; } } @media (max-width:700px){ /*UNTUK DEVICE YANG LEBARNYA KURANG DARI 700PX*/ } Nah, CSS table yang kita buat pertama tadi, langsung saja kita letakkan semua di CSS Media bagian pertama untuk device dengan lebar minimum 700px. Setelah itu, kita masuk ke CSS Media bagian kedua untuk mengatur tampilan di device dengan lebar yg dibawah 700px. 2. Atur nilai tag TABLE, TBODY, TR, TH, dan TD dengan display:block. Karena secara default tabel memiliki display:table, maka kita ubah semuanya menjadi block supaya tabelnya nanti bisa turun kebawah, dan lebar tabelnya otomatis 100%. @media (max-width:700px){ table,tbody,tr,td{ display:block; position:relative; }

} 3. Supaya antar data nanti ada jaraknya, kita berikan border-bottom berwarna putih pada TR. (Optional) @media (max-width:700px){

table,tbody,tr,td{ display:block; position:relative; } tr{border-bottom:3px solid #fff;} /*optional. nggak ada juga ga apa2*/ } 4. Karena TH tidak akan ditampilkan, kita hilangkan saja sekalian dengan nilai DISPLAY:NONE. @media (max-width:700px){ table,tbody,tr,td{ display:block; position:relative; } tr{border-bottom:3px solid #fff;} th{display:none;} } 5. Selanjutnya, kita memanggil nama kolom yang sudah kita ketikkan di atribut data-content pada masing-masing TD tadi. Dengan bantuan pseudo-element ::before pada tag TD yang bersangkutan itu sendiri tentunya. Cara memanggilnya seperti ini : @media (max-width:700px){ table,tbody,tr,td{ display:block; position:relative; } tr{border-bottom:3px solid #fff;} th{display:none;} td:before{ display:block; content:attr(data-content); /*mengisi data dengan value yang ada di atribut tersebut*/ position:absolute; text-indent:0px; width:80px; /*disesuaikan dengan kebutuhan*/ /*desainnya bisa disamakan seperti tag TH*/ background:#33b4e4; color:#fff; text-transform:uppercase; font-weight:bold; height:100%; line-height:40px; padding:0px 10px; }

} 6. Dan terakhir, berikan nilai text-indent pada TD dengan nilai yang sedikit lebih besar dari lebar td:before tadi. Kenapa? Karena layer td::before tadi itu displaynya absolute, sehingga tulisan di tag TD itu akan ketutupan sama td::before yang kita buat tadi kalau nggak dikasi text-indent. @media (max-width:700px){ table,tbody,tr,td{ display:block; position:relative; } tr{border-bottom:3px solid #fff;} th{display:none;} td:before{ display:block; content:attr(data-content); width:80px; background:#33b4e4; color:#fff; text-transform:uppercase; font-weight:bold; height:100%; line-height:40px; position:absolute; text-indent:0px; padding:0px 10px; } td{ text-indent:120px; /*disesuaikan dengan kebutuhan*/ line-height:40px; /*line-height disamakan dengan td:before, supaya tampilan teksnya rata*/ background:#f7f7f7; } }

Dari sekian langkah panjang tadi, jadilah tampilan seperti ini pada layar dengan lebar dibawah 700px :

Nah, sekian tutorial tabel responsive dari saya.. Mohon maaf kalau ternyata masih susah dipahami, karena itu saya menerima semua kritik saran dan pertanyaannya. Untuk demo dan download source code langsungnya tinggal klik tombol dibawah ini saja. Terima kasih untuk perhatiannya.. :)

Tentang Penulis Christian Rosandhy