Pada kesempatan kali ini kita akan membahas bagaimana cara membuat tabel responsive dengan CSS 3.
Setidaknya terdapat dua cara untuk membuat tabel responsive dengan CSS yaitu (1) mengubah struktur tabel (2) menambahkan container pada tabel sehingga isi dari tabel tersebut dapat di scroll.
Keduanya masing masing memiliki kelebihan dan kekurangan. Kita akan membahas keduanya sesaat lagi.
Bentuk awal tabel yang akan kita gunakan adalah sebagai berikut:
Dengan kode HTML dan CSS Sebagai berikut:
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<style type="text/css">
body {
font-family: "Lucida Sans Unicode", "Lucida Grande", "Segoe Ui";
}
/* Table */
table {
margin: auto;
font-family: "Lucida Sans Unicode", "Lucida Grande", "Segoe Ui";
font-size: 12px;
}
.demo-table {
border-collapse: collapse;
font-size: 13px;
}
.demo-table th,
.demo-table td {
border-bottom: 1px solid #e1edff;
border-left: 1px solid #e1edff;
padding: 7px 17px;
}
.demo-table th,
.demo-table td:last-child {
border-right: 1px solid #e1edff;
}
.demo-table td:first-child {
border-top: 1px solid #e1edff;
}
.demo-table td:last-child{
border-bottom: 0;
}
caption {
caption-side: top;
margin-bottom: 10px;
}
/* Table Header */
.demo-table thead th {
background-color: #508abb;
color: #FFFFFF;
border-color: #6ea1cc !important;
text-transform: uppercase;
}
/* Table Body */
.demo-table tbody td {
color: #353535;
}
.demo-table tbody tr:nth-child(odd) td {
background-color: #f4fbff;
}
.demo-table tbody tr:hover th,
.demo-table tbody tr:hover td {
background-color: #ffffa2;
border-color: #ffff0f;
transition: all .2s;
}
</style>
</head>
<body>
<table class="demo-table responsive" >
<caption class="title">Tabel Awal</caption>
<thead>
<tr>
<th scope="col">Nama</th>
<th scope="col">Alamat</th>
<th scope="col">Telp</th>
<th scope="col">Email</th>
</tr>
</thead>
<tbody>
<tr>
<td data-header="Nama" class="title">Anton</td>
<td data-header="Alamat" >Jakarta</td>
<td data-header="Telp" >08562136x</td>
<td data-header="Email" >anton@email.com</td>
</tr>
<tr>
<td data-header="Nama" class="title">Bryan</td>
<td data-header="Alamat" >Surabaya</td>
<td data-header="Telp" >08581234x</td>
<td data-header="Email" >bryan@email.com</td>
</tr>
<tr>
<td data-header="Nama" class="title">Cherly</td>
<td data-header="Alamat" >Semarang</td>
<td data-header="Telp" >08121234x</td>
<td data-header="Email" >cherly@email.com</td>
</tr>
<tr>
<td data-header="Nama" class="title">Dean</td>
<td data-header="Alamat" >Makassar</td>
<td data-header="Telp" >08111234x</td>
<td data-header="Email" >dean@email.com</td>
</tr>
<tr>
<td data-header="Nama" class="title">Esryl</td>
<td data-header="Alamat" >Medan</td>
<td data-header="Telp" >08131234x</td>
<td data-header="Email" >esryl@email.com</td>
</tr>
</tbody>
</table>
</body>
</html>I. Membuat Tabel Responsive Dengan CSS 3 – Mengubah Tampilan Tabel
Pada model ini ketika tabel ditampilkan pada viewport kecil (mobile), bentuk tabel akan berubah.
Sama seperti prinsip dasar membuat elemen html menjadi responsive, kali ini kita akan menghilangkan beberapa elemen tabel yang tidak diperlukan.
1. Tabel Responsive Tanpa Elemen Header
Pada model pertama ini, kita akan menyembunyikan header tabel <thead> dan hanya menampilkan isi dari tabel <tbody>. Sebagai tambahan, kita tambahkan pseudo elemen ::before yang berisi data header.
Isi dari pseudo element tersebut diambil dari atribut data-header dari masing masing elemen <td> dengan menggunakan kode css content: attr(data-header)
Kode HTML
<tr>
<td data-header="Nama" class="title">Anton</td>
<td data-header="Alamat" >Jakarta</td>
<td data-header="Telp" >08562136x</td>
<td data-header="Email" >anton@email.com</td>
</tr>Kode CSS responsivenya:
@media screen and (max-width: 520px) {
table.responsive {
width: 100%;
}
thead {
display: none;
}
td {
display: block;
text-align: right;
border-right: 1px solid #e1edff;
}
td::before {
float: left;
text-transform: uppercase;
font-weight: bold;
content: attr(data-header);
}
}Pada kode css diatas, pada layar dengan lebar dibawa 520px, kita buat lebar tabel menjadi 100% dan kita sembunyikan elemen <thead>
Hasil akhir akan tampak seperti gambar berikut:
Jika diilustrasikan dengan gambar, susunan elemen HTML nya tampak seperti gambar berikut:
2. Tabel Responsive Dengan Elemen Header
Sama seperti model sebelumnya, namun pada model kali ini kita akan menampilkan beberapa elemen header yang diperlukan.
Model ini umumnya digunakan pada halaman edit data, dimana pada masing masing data terdapat pilihan untuk mengedit atau menghapus data.
Untuk memilih elemen header yang ingin ditampilkan kita tambahkan class pada elemen tersebut, kali ini kita akan menggunakan class column-primary.
Selain itu kita tambahkan satu kolom lagi yaitu kolom opsi yang berisi tombol edit dan hapus. Penting diperhatikan bahwa tambahan kolom ini menggunakan elemen <th> bukan <td>
Struktur elemen HTML yang baru:
<thead>
<tr>
<th scope="col" class="column-primary" data-header="Pelanggan"><span>Nama</span></th>
<th scope="col">Alamat</th>
<th scope="col">Telp</th>
<th scope="col">Email</th>
<th scope="col" class="column-primary">Opsi</th>
</tr>
</thead>
<tbody>
<tr>
<td data-header="Nama" class="title">Anton</td>
<td data-header="Alamat" >Jakarta</td>
<td data-header="Telp" >08562136x</td>
<td data-header="Email" >anton@email.com</td>
<th scope="row">
<div class="toolbox">
<a href="#" class="edit"><i class="fa fa-pencil-square-o"></i></a>
<a href="#" class="remove"><i class="fa fa-close"></i></a>
</div>
</th>
</tr>
</tbody>Kode CSS
@media screen and (max-width: 520px) {
table {
width: 100%;
}
thead th.column-primary {
width: 100%;
}
thead th:not(.column-primary) {
display:none;
}
th[scope="row"] {
vertical-align: top;
}
td {
display: block;
width: auto;
text-align: right;
}
thead th::before {
text-transform: uppercase;
font-weight: bold;
content: attr(data-header);
}
thead th:first-child span {
display: none;
}
td::before {
float: left;
text-transform: uppercase;
font-weight: bold;
content: attr(data-header);
}
}Hasil yang kita peroleh seperti tampak pada gambar berikut:
Perhatikan bahwa header yang sebelumnya berisi “NAMA” ketika ditampilkan pada mobile berubah Menjadi “PELANGGAN”
3. Tabel Responsive Dengan Expand dan Collapse
Model ini merupakan variasi dari model sebelumnya dimana kali ini hanya ditampilkan data nama saja. Disebelah nama terdapat tombol arrow yang bermanfaat untuk meng-expand / collapse detail dari nama tersebut.
Hasil jadinya tampak seperti gambar berikut:
Pada model ini kita sedikit menggunakan bantuan javascript (jquery), yaitu untuk membuat efek expand dan collapse.
Teknisnya ketika tombol expand (panah kebawah) di klik, maka kita tambahkan class “expand” pada elemen <tr> selanjutnya dengan pengaturan CSS kita tampilkan data dibawahnya, hal sebaliknya terjadi ketika tombol collapse di klik.
Script jQuery yang kita perlukan adalah:
$(document).ready(function() {
$('a.more').click(function() {
// Toggle Class
$tr = $(this).parent().parent();
$tr.toggleClass('expanded');
// Tampilkan - sembunyikan baris
$i = $(this).children('i');
$i.removeClass('fa-chevron-down', 'fa-chevron-up');
var arrow = $tr.hasClass('expanded') ? 'fa-chevron-up' : 'fa-chevron-down';
$i.addClass(arrow);
return false;
});
})II. Tabel Responsive Dengan CSS – Mempertahankan Struktur Tabel
Pada model ini, tabel ditampilkan apa adanya seperti pada tampilan layar lebar, kita hanya menambahkan container pada tabel, sehingga pada layar kecil tabel dapat di scroll relative terhadap container tersebut.
Kali ini container kita buat menggunakan elemen <div> dengan class table-container rule css untuk class tersebut adalah sebagai berikut:
.table-container {
overflow: auto;
}Adapun struktur HTML nya adalah:
<div class="table-container">
<table>
...
</table>
</div>Hasilnya tampak seperti pada gambar berikut:
Demikian pembahasan mengenai cara membuat tabel responsive dengan CSS 3 semoga bermanfaat.
Subscibe Now
Suka dengan artikel di Jagowebdev.com? jangan sampai ketinggalan, segera join ke milis kami untuk update informasi terbaru dari Jagowebdev.com
40 Feedback dari pembaca
min ko yang mempertahankan struktur tabel gak bisa yah ? yang pake overflow : auto
Bisa mbak, coba cek demonya, di tabel paling bawah
boleh minta source code nya gan? fungsi collapsenya sy coba sendiri ga bisa
Coba di view source pada halaman demonya mas, terus di download file javascript nya
Oh ya, saya newbie, kalau untuk membuat tabel responsive dengan frame tetap tapi tabel bisa discroll ke samping dan vertikal itu bagaimana ya? Contohnya di tabel CSS yang anda tampilkan untuk poin 2. Tabel Responsive Dengan Elemen Header.
framenya ini sebenarnya hanya contoainer mas, bisa menggunakan elemen div, yang penting buat property overflow bernilai auto, misal:
td::before {
float: left;
text-transform: uppercase;
font-weight: bold;
content: attr(data-header);
}
attr() untuk apa bang?
Itu untuk menganbil data dari atribut data-attr yang ada di element td mas, sengga isi dari element td::before adalah nilai dari atribut tadi, misal:
Maka element td::before akan berisi (content) Nama
Terimah kasih atas tutorial-nya berkat artikel ini saya sudah bisa membuat table responsive di website saya 🙂
Terimah kasih kepada adminnya 🙂
Terima kasih mas, ikut senang mendengarnya…
terimakasih sharing ilmunya
Sama sama mbak
Mantap mas.. susahx nyari yg no.4 ketemunya disini..
yg pasti work..thanks
Terima kasih mas…
Kebetulan lagi bikin blog tentang spesifikasi Netbook/Notebook, mau buat tabel seperti GSMArena, akhirul kalam tabel berantakan 😀
Ada nggak mas tabel dengan 3 kolom; dengan penggunaan tabel sepert ini:
Example – Contoh A – Keterangan
– Contoh B – Keterangan
Example – Contoh C – Keterangan
– Contoh D – Keterangan
Example – Contoh E – Keterangan
– Contoh F – Keterangan
Penggunaannya tanpa JavaScript (Js), cuma bermodalkan HTML dan CSS. Tolongin mas 🙂
Itu seperti tabel biasa bukan mas? Seharusnya bisa hanya dengan HTML dan CSS, ada contoh bentuk tabel nya seperti apa?
Makasih mas
Sama sama mas…
Salam, sy buka agen ekspedisi. Sy mau bikin tabel nama penerima diklik muncul resi, tp sebelumnya input pasword nama kota penerima tinggal
Bisa mas, tinggal dikasih link di nama penerima, jika ingin tidak refresh halaman, di buatkan ajax
sore gan, kalo sumber datanya dari data base gimna nampilkannya ya
Sama saja mas, tinggal di echo datanya
aku sudah coba echo tapi yang tampil hanya data nomor 1 aja, lopingnya di buat dimana ya gan
Mungking data hasil query data base cuman satu mas, coba querynya dijalankan di databse manager
ada enam mas, mungkin penggunaan loopingnya yang kurang pas, mas ada panduan looping dengan mengambil kondisi (jumlah data dari data base)
Maaf belum ada mas…
Thanks mas atas informasi nya.
bang klo table yg dibuat dri word/excel caranya gmna ya
Dijadikan format HTML dulu mas
http://www.tukangsaya.com/p/layanan.html
Kalau buat kolom begini bagaimana caranya mas?
Itu ngga pakai tabel mas, coba pelajari tentang responsive layout
makasih banyak, bermanfaat sekali
Sama sama mbak
cara mempertahankan background agar mengikuti tabel gmana yaa ?
Maksudnya bagaimana ya mas?
Mantaapp.. perlu dicoba nih… kayaknya bagus buat ngisi tabel display… Full CSS3 no JS ya gan??
Betul mas, full CSS
Mas untuk yang no 3 css nya sama persis kayak yang no 2 kah??
makasih banyak, bermanfaat sekali mas hehe
Sama sama mas