Cara Membuat Tabel Responsive

Tabel Responsive Tanpa Bootstrap

Untuk membuat tabel agar responsive umumnya kita menggunakan twitter bootstrap. Ada juga yang menyediakan fitur serba responsive lainnya seperti bulma, foundation dan sebagainya. Tidak sedikit pula yang memahami pemrograman CSS lebih memilih desain tabel dalam bentuk list (daftar).

Cara Membuat Tabel Responsive

Akan tetapi, disini kita akan menggunakan 1 baris kode saja agar tabel yang kita buat menjadi responsive tanpa repot-repot memikirkan dan menggunakan javascript, jquery atau bootstrap js. Satu baris kode itu adalah:

overflow-x:auto;

Bagaimana Cara Menggunakan overflow-x:auto; pada Tabel agar Responsive

Pertama, buatlah terlebih dahulu konsep tabelnya. Misalnya ada; 5 kolom, 4 baris, yang rinciannya sebagai berikut:

<table>

<tr>

<th>No</th>

<th>Nama Lengkap</th>

<th>Usia</th>

<th>Pekerjaan</th>

<th>Alamat</th>

</tr>

<tr>

<td>1</td>

<td>Khairul Annas</td>

<td>150 tahun</td>

<td>Online Broker</td>

<td>Lampung</td>

</tr>

<tr>

<td>2</td>

<td>Ramdhani Eva</td>

<td>194 tahun</td>

<td>Graphic Designer</td>

<td>Papua Nugini</td>

</tr>

<tr>

<td>3</td>

<td>Metra Fajri</td>

<td>467 tahun</td>

<td>Restaurant Manager</td>

<td>Jerman</td>

</tr>

</table>

Kedua, Membungkus tabel tersebut dengan DIV element, semisal

<div>

<!-- tabel disini -->

</div>

Kemudian, tambahkan kode diatas pada element DIV, sbb:

<div style="overflow-x:auto;">

Sehingga keseluruhan menjadi:

<div style="overflow-x:auto;">

<table>

<tr>

<th>No</th>

<th>Nama Lengkap</th>

<th>Usia</th>

<th>Pekerjaan</th>

<th>Alamat</th>

</tr>

<tr>

<td>1</td>

<td>Khairul Annas</td>

<td>150 tahun</td>

<td>Online Broker</td>

<td>Lampung</td>

</tr>

<tr>

<td>2</td>

<td>Ramdhani Eva</td>

<td>194 tahun</td>

<td>Graphic Designer</td>

<td>Papua Nugini</td>

</tr>

<tr>

<td>3d</td>

<td>Metra Fajri</td>

<td>467 tahun</td>

<td>Restaurant Manager</td>

<td>Jerman</td>

</tr>

</table>

</div>

Berikut ini demo tabel responsive: 

No	Nama Lengkap	Usia	Pekerjaan	Alamat
1	Khairul Annas	150 tahun	Online Broker	Lampung
2	Ramdhani Eva	194 tahun	Graphic Designer	Papua Nugini
3	Metra Fajri	467 tahun	Restaurant Manager	Jerman

Untuk Mempercantik tampilan tabel dapat diberi polesan sedikit dengan menggunakan CSS; Contoh:

<style>

table {

    border-collapse: collapse;

    border-spacing: 0;

    width: 100%;

    border: 1px solid #ddd;

}

th, td {

    border: none;

    text-align: left;

    padding: 8px;

}

tr:nth-child(even){background-color: #f2f2f2}

</style>

Hasil Final:

No	Nama Lengkap	Usia	Pekerjaan	Alamat
1	Khairul Annas	150 tahun	Online Broker	Lampung
2	Ramdhani Eva	194 tahun	Graphic Designer	Papua Nugini
3	Metra Fajri	467 tahun	Restaurant Manager	Jerman