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.
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.
<table id="tableku" class="table-bordered table-striped table-condensed"> <thead> <tr><th>No</th><th>NIS</th><th>Nama Siswa</th><th>Ganteng</th><th>Alamat</th><th>Zodiak</th><th>Berkelamin</th ><th>Mikes</th><th>Makes</th></tr> </thead> <tbody> <tr> <td>1</td> <td>001</td> <td>Legimin Sugiarto</td> <td>Tidak</td> <td>Jln Planet Mars</td> <td>Pieces</td> <td>Ya</td>
<td>Jus Michael Jackson</td> <td>Tello Matta Xavi</td> </tr> <tr> <td>2</td> <td>002</td> <td>Mukmin Waluyo</td> <td>Tidak</td> <td>Jln Planet Pluto</td> <td>Capricorn</td> <td>Ya</td>
<td>Jus Tanpa Air ala Mad Dog</td> <td>Sambal Ikan Terry</td>
</tr> <tr> <td>3</td> <td>003</td> <td>Sarijem</td> <td>Tidak</td> <td>Jln Planet Merkurius</td> <td>Leo Kripik Kentang</td> <td>Ya</td>
<td>Jus Jus an</td> <td>Crabby patty</td> </tr>
</tbody> </table>
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.
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; }
/* sort out borders
#tableku th { border-bottom: 0; border-left: 0; }
#tableku td { border-left: 0; border-right: 0; border-bottom: 0; } #tableku tbody tr { border-left: 1px solid #babcbf; }
#tableku th:last-child,
#tableku td:last-child { border-bottom: 1px solid #babcbf; } }
nah jika sudah coba lihat hasilnya berikut penampakannya
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 <td> 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.
<div id="no-more-tables">
<table class="table-bordered table-striped table-condensed"> <thead> <tr><th>No</th><th>NIS</th><th>Nama Siswa</th><th>Ganteng</th><th>Alamat</th><th>Zodiak</th><th>Berkelamin</th ><th>Mikes</th><th>Makes</th></tr> </thead> <tbody> <tr> <td data-title="No">1</td> <td data-title="Nis">001</td> <td data-title="nama">Legimin Sugiarto</td> <td data-title="ganteng">Tidak</td>
<td data-title="alamat">Jln Planet Mars</td> <td data-title="zodiak">Pieces</td>
<td data-title="berkelamin">Ya</td>
<td data-title="mikes">Jus Michael Jackson</td> <td data-title="makes">Tello Matta Xavi</td> </tr>
<tr>
<td data-title="No">2</td> <td data-title="Nis">002</td>
<td data-title="ganteng">Tidak</td>
<td data-title="alamat">Jln Planet Pluto</td> <td data-title="zodiak">Capricorn</td>
<td data-title="berkelamin">Ya</td>
<td data-title="mikes">Jus Tanpa Air ala Mad Dog</td> <td data-title="makes">Sambal Ikan Terry</td>
</tr> <tr> <td data-title="No">3</td> <td data-title="Nis">003</td> <td data-title="nama">Sarijem</td> <td data-title="ganteng">Tidak</td>
<td data-title="alamat">Jln Planet Merkurius</td> <td data-title="zodiak">Leo Kripik Kentang</td> <td data-title="berkelamin">Ya</td>
<td data-title="mikes">Jus Jus an</td> <td data-title="makes">Crabby patty</td> </tr>
</tbody> </table> </div>
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;
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 :).
