Membuat tabel responsive dengan css dan html | Web responsive sudah menjadi salah satu kebutuhan mendasar sebuah website saat ini, alasannya karena pengguna perangkat mobile semakin banyak, bahkan sudah sampai mengalahkan pengguna desktop.

tabel responsive

Namun berbagai masalah muncul ketika membuat website responsive, ada bagian-bagian yang sulit untuk dibuat menjadi responsive. misalnya saja tabel. Tidak sama dengan div atau element lain, tabel yang berisi banyak kolom dan baris cukup sulit untuk menyesuaikan ukuran layar yang lebih kecil

Nah, untuk mengatasi masalah tersebut, Jurnalweb mencoba membuatkan sebuah tutorial sederhana yang bisa Anda gunakan untuk membuat tabel responsive dengan CSS, tidak perlu bantuan javascript sama sekali.

Cara membuat tabel responsive dengan CSS dan HTML

Kode HTML

Langkah pertama coba Anda buat dahulu struktur tabelnya seperti dibawah ini

<table>
  <caption>Data Pelanggan</caption>

<thead>

<tr>

<th scope="col">Nama</th>


<th scope="col">Alamat</th>


<th scope="col">Email</th>


<th scope="col">Nomor Telepon</th>

</tr>

</thead>


<tbody>

<tr>

<td scope="row" data-label="Nama">David Beckham</td>


<td data-label="Alamat">Manchester, Inggris</td>


<td data-label="Email">davidbeckham@example.com</td>


<td data-label="Nomor Telepon">021-01010xxx</td>

</tr>


<tr>

<td scope="row" data-label="Nama">Mike Tyson</td>


<td data-label="Alamat">California, Amerika Serikat</td>


<td data-label="Email">miketyson@example.com</td>


<td data-label="Nomor Telepon">021-9198199189291929</td>

</tr>


<tr>

<td scope="row" data-label="Nama">Justin Bieber</td>


<td data-label="Alamat">New York, Amerika Serikat</td>


<td data-label="Email">justinbierber@example.com</td>


<td data-label="Nomor Telepon">021-2929292929101019</td>

</tr>


<tr>

<td scope="row" data-label="Nama">Selena Gomez</td>


<td data-label="Alamat">Texas, Amerika Serikat</td>


<td data-label="Email">selena.gomez@example.com</td>


<td data-label="Nomor Telepon">021-819199191991919</td>

</tr>

</tbody>

</table>

CSS

Selanjutnya buat menjadi responsive agar bisa terlihat bagus jika dibuka diperangkat mobile.

Tambahkan CSS seperti berikut ini untuk mempercantik tampilannya serta membuatnya menjadi responsive.

body {
	font-family: "Times New Roman", serif;
	line-height: 1.25;
	padding: 40px 20px;
}
.header{
	text-align: center;
	border-bottom: 1px solid #ddd;
}
table {
	border: 1px solid green;
	border-collapse: collapse;
	margin: 0;
	padding: 0;
	width: 100%;
}
table caption {
	font-size: 1.5em;
	margin: .25em 0 .75em;
}
table tr {
	background: yellow;
	border: 1px solid green;
	padding: .35em;
}
table th,
table td {
	padding: .625em;
	text-align: center;
}
table th {
	font-size: .85em;
	letter-spacing: .1em;
	text-transform: uppercase;
	background: green;
	color: white;
}
table td img {
	text-align: center;
}
@media screen and (max-width: 600px) {
	table {
		border: 0;
	}
	table caption {
		font-size: 1.3em;
	}
	table thead {
		display: none;
	}
	table tr {
		border-bottom: 3px solid green;
		display: block;
		margin-bottom: .725em;
	}
	table td {
		border-bottom: 1px solid green;
		display: block;
		font-size: .8em;
		text-align: right;
	}
	table td:before {
		content: attr(data-label);
		float: left;
		font-weight: bold;
		text-transform: uppercase;
	}
	table td:last-child {
		border-bottom: 0;
	}
}

Logika dari script diatas adalah ketika ukuran layar lebih kecil dari 600px maka baris kepala kolom (tag thead) akan disembunyikan, lalu sebagai penggantinya kolom tabel (tag td) tersebut akan dibuat menjadi satu kolom saja, dan ditampilkan isi data dari atribut “data-table” yang ada di script HTML sebagai label dari setiap [tag td].

– Baca juga: Resizer, Tool Buatan Google Untuk Menguji Web Responsive

Jika Anda tertarik ingin mencoba dan melihat script lengkapnya, silahkan klik link dibawah ini.

DEMO | DOWNLOAD CODE

Semoga ini dapat membantu Anda memahami CSS dan HTML lebih dalam lagi serta membantu pekerjaan Anda.

Punya solusi lain untuk membuat tabel responsive? Share saja di kolom komentar ya.