ffCCBot/2.0 (http://commoncrawl.org/faq/)
NEW!! Buku Query MySQL Lihat Detail » x

Membuat Tabel Responsive Dengan CSS – 4 Alternatif

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:

Tabel Awal

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:

Membuat Tabel Responsive Dengan HTML dan CSS 3

Jika diilustrasikan dengan gambar, susunan elemen HTML nya tampak seperti gambar berikut:

Ilustrasi Tabel Responsive Dengan CSS 3

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:

Tabel Responsive Dengan Header

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:

Tabel Responsive Dengan Header - Expand - Collapse

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:

Tabel Responsive Dengan Mempertahankan Bentuk Tabel

Demikian pembahasan mengenai cara membuat tabel responsive dengan CSS 3 semoga bermanfaat.

Recomended Post

6 Feedback dari pembaca

Silakan tinggalkan komentar

*

Like Us

Dapatkan update artikel terbaru via E-Mail
  1. Query MySQL di Dalam PHP Loop – Bad Practice !!!

  2. Software Kompres dan Optimasi Gambar / Foto (JPG dan PNG) – Tested

  3. 40+ Theme WordPress Gratis Untuk Blog – Modern & Responsive

  4. Eksklusif Cheat Sheet PHP Bahasa Indonesia – Pendamping Belajar PHP

  5. PHP FORM III: Menampilkan Data MySQL Dengan PHP dan Form HTML

  6. Tutorial PHP Form II: Menampilkan Hasil Input Form HTML dengan PHP

  7. Tutorial PHP Form I: Menghubungkan Form HTML dengan PHP

  8. Menampilkan Data Dari Beberapa Tabel MySQL – JOIN Pada MYSQL

  9. Memahami dan Menampilkan Tanggal dan Waktu Pada PHP

  10. Menghitung Selisih Waktu Dengan PHP – Cara Termudah