1 2 Membuat Responsive Table Oleh: ricky orlando napitupulu Salam bro/sis :D selamat datang di tutorial saya yang satu ini yaitu membuat responsive ta...
Membuat Responsive Table Oleh: ricky orlando napitupulu
Salam bro/sis :D selamat datang di tutorial saya yang satu ini yaitu membuat responsive table punyanya bootstrap. O ya ditulisan yang satu ini agak beda ya :D serba bold semua font nya :D. Ya biar kagak bosan mbaca tutorial ane mulu:D Seperti diketahui table dari bootstrap belum sepenuhnya mendukung responsive, ga caya ??? coba buat tabel dengan bootstrap trus perbesar layar browser ka...
Salam bro/sis :D selamat datang di tutorial saya yang satu ini yaitu membuat responsive table punyanya bootstrap. O ya ditulisan yang satu ini agak beda ya :D serba bold semua font nya :D. Ya biar kagak bosan mbaca tutorial ane mulu:D
Seperti diketahui table dari bootstrap belum sepenuhnya mendukung responsive, ga caya ??? coba buat tabel dengan bootstrap trus perbesar layar browser kamu dengan menekan tombol ctrl + scroll up pada mouse sampai blong... nah disitu akan terlihat musuh abadi dari responsive desain yaitu horizontal scrollbar. Oleh karena itu disini saya coba membagikan tutorial ini.
Ada 3 teknik dalam membuat responsive table diantaranya adalah : ● ● ●
The Unseen Columns, karya : @irishstu Flip Scroll, karya : @dbushell No More Tables, karya : @chriscoyier
Tanpa banyak basa basi lagi mari kita coba praktekkan
The Unseen Columns, karya : @irishstu langsung aja kita coba pake versi yang pertama, yaitu punya nya si om irishstu metodenya ialah dengan menghilangkan beberapa kolom si tabel, nah jadi disini kita kudu milih misal ada kolom yang bisa dihilangkan tanpa merusak informasi yang ada pada tabel tersebut, Oya disini kamu bisa memilih berapa kolom yang akan dihilangkan berdasarkan ukuran layar browser yang sedang digunakan. sebagai contoh misal disuatu tabel ada 3 kolom yaitu no, nama, dan jenis kelamin nah maka kita dapat menghilangkan kolom no tanpa merusak informasi yang akan disampaikan.
Nah begitu da kira-kira metode yang digunakan si irishstu ini, Ok langsung aja kita coba
implementasikan.
pertama coba buat sebuah dokumen baru lalu includekan bootstrap.css pada dokumen anda, lalu copy code membuat tabel dibawah ini ke bagian body tentunya.
No
NIS
Nama Siswa
Ganteng
Alamat
Zodiak
Berkelamin
Mikes
Makes
1
001
Legimin Sugiarto
Tidak
Jln Planet Mars
Pieces
Ya
Jus Michael Jackson
Tello Matta Xavi
2
002
Mukmin Waluyo
Tidak
Jln Planet Pluto
Capricorn
Ya
Jus Tanpa Air ala Mad Dog
Sambal Ikan Terry
3
003
Sarijem
Tidak
Jln Planet Merkurius
Leo Kripik Kentang
Ya
Jus Jus an
Crabby patty
Jika sudah lalu coba tambahkan code css berikut ini ke doukumen anda @media only screen and (max-width: 800px) { #tableku th:nth-child(1), #tableku td:nth-child(1){display: none;} } @media only screen and (max-width: 640px) { #tableku td:nth-child(1), #tableku th:nth-child(1), #tableku td:nth-child(4), #tableku th:nth-child(4), #tableku td:nth-child(9), #tableku th:nth-child(9){display: none; }
*Important : Perhatikan Id yang ada pada tabel dan pada css, pastikan sama
Hasilnya, beberapa kolom hilang dari peredaran :)
Penjelasan
Perhatikan kode CSS diatas, Kode tersebut memerintahkan agar membuang kolom 1 atau kolom no ketika layar browser <=800px begitu juga dengan kode yang kedua, ketika layar browser <=640px musnahkan kolom 1,4,9. Kamu dapat mengkostum nilai 1 4 9 atau kolom yang akan dimusnahkan dan mengubah nilai parameter layar browser (max-width).
Yesssss , that's it. Mudah bukan :D Sekarang kita lanjut ke versi yang kedua yaitu punya nya si debusel
Flip Scroll, karya : @dbushell Sekarang kita lanjut ke versi yang kedua yaitu punya nya si debusel, cara kerja punya si debusel ini ialah dengan merubah bentuk tabel nya yaitu membuat heading tabel yang tadinya diatas menjadi disamping kiri lalu data nya ditampilkan pada bagian kanan tabel nya. Jika data terlalu banyak maka akan ditampilkan horizontal scroll pada tabel tersebut.
Sekarang kita coba implementasikan, kita masih dapat menggunakan contoh tabel yang ada diatas, jadi cukup mengganti (repcale) css yang tadi dengan css yang ada dibawah ini. @media only screen and (max-width: 800px) { #tableku .cf:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } #tableku * html .cf { zoom: 1; } #tableku *:first-child+html .cf { zoom: 1; } #tableku { width: 100%; border-collapse: collapse; border-spacing: 0; } #tableku th, #tableku td { margin: 0; vertical-align: top; } #tableku th { text-align: left; } #tableku { display: block; position: relative; width: 100%; } #tableku thead { display: block; float: left; } #tableku tbody { display: block; width: auto; position: relative; overflow-x: auto; white-space: nowrap; } #tableku thead tr { display: block; } #tableku th { display: block; text-align: right; } #tableku tbody tr { display: inline-block; vertical-align: top; } #tableku td { display: block; min-height: 1.25em; text-align: left; }
yes.... that's it, one more responsive table. Well done :D
No More Tables, karya : @chriscoyier The last one, karya om chris. Teknik ini menggunakan bumbu-bumbu HTML 5 yaitu atribut data. Cara kerjanya hampir sama dengan si bedusel hanya saja si chris ini tidak menggunakan horizontal scrollbar tetapi justru membuat semacam tabel baru lagi kebawah :D bingung pasti ya baca penjelasanya , ni liat aja skrinsut nya.
kelemahan teknik ini adalah mengakibatkan dokumen kita jadi memanjang kebawah Sekarang kita coba praktekkan, kita tetap menggunakan tabel diatas, hanya saja apit tabel tersebut dengan sebuah div yang diberi id no-more-tables. Buang juga atribut id yang melekat pada tabel, lebih jelasnya gunakan saja skrip html untuk tabelnya dibawah ini. Perhatikan html tabel dibawah ini, pada tag
saya menambahkan atribut data-title yang diberi nilai sesuai dengan judul dari nilai yang bersangkutan. Nilai tersebutlah yang digunakan sebagai judul dari setiap nilai yang ada pada tbody.
No
NIS
Nama Siswa
Ganteng
Alamat
Zodiak
Berkelamin
Mikes
Makes
1
001
Legimin Sugiarto
Tidak
Jln Planet Mars
Pieces
Ya
Jus Michael Jackson
Tello Matta Xavi
2
002
Mukmin Waluyo
Tidak
Jln Planet Pluto
Capricorn
Ya
Jus Tanpa Air ala Mad Dog
Sambal Ikan Terry
3
003
Sarijem
Tidak
Jln Planet Merkurius
Leo Kripik Kentang
Ya
Jus Jus an
Crabby patty
Langkah selanjutnya ialah masukkan kode css berikut ini ke dokumen anda @media only screen and (max-width: 800px) { /* Force table to not be like tables anymore */ #no-more-tables table, #no-more-tables thead, #no-more-tables tbody, #no-more-tables th, #no-more-tables td, #no-more-tables tr { display: block; } /* Hide table headers (but not display: none;, for accessibility) */ #no-more-tables thead tr { position: absolute; top: -9999px; left: -9999px; } #no-more-tables tr { border: 1px solid #ccc; } #no-more-tables td { /* Behave like a "row" */ border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 50%;
white-space: normal; text-align:left; } #no-more-tables td:before { /* Now like a table header */ position: absolute; /* Top/left values mimic padding */ top: 6px; left: 6px; width: 45%; padding-right: 10px; white-space: nowrap; text-align:left; font-weight: bold; } /* Label the data */ #no-more-tables td:before { content: attr(data-title); } }
Perfecto, Thx uda mampir bro/sis, See you ;)
Demo : Download
Tentang Penulis ricky orlando napitupulu Nothing special :) Saya seorang lelaki, mahasiswa, blogger, cinta musik dan juga sedang mencoba ilmu desain grafis. Tidak banyak pengetahuan yang bisa saya bagikan, Namun saya akan sangat senang membagikan pengetahuan tersebut bila dibutuhkan :).
