Membuat Responsive Table

Ukuran: px

Mulai penontonan dengan halaman:

Download "Membuat Responsive Table"

Sudomo Tedjo
7 tahun lalu
Tontonan:

2 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 Flip Scroll, karya No More Tables, karya Tanpa banyak basa basi lagi mari kita coba praktekkan The Unseen Columns, karya 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

3 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> <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> </thead> <tbody> <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> <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> <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> </tbody> </table>

4 Jika sudah lalu coba tambahkan code css berikut ini ke doukumen only screen and (max-width: 800px) { #tableku th:nth-child(1), #tableku td:nth-child(1){display: 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 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 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.

5 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 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 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.

6 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> <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> </thead> <tbody> <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> <td data-title="no">2</td> <td data-title="nis">002</td> <td data-title="nama">mukmin Waluyo</td>

7 <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> <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> </tbody> </table> </div> Langkah selanjutnya ialah masukkan kode css berikut ini ke dokumen 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%;

8 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 :).

dokumen-dokumen yang mirip

DASAR-DASAR CSS DASAR-DASAR CSS By: Rohi Abdulloh A. PENGENALAN

DASAR-DASAR CSS DASAR-DASAR CSS 2015 A. PENGENALAN CSS merupakan kependekan dari Cascading Style Sheet yaitu suatu skrip yang digunakan untuk mempercantik tampilan HTML atau mengatur bagaimana elemen HTML