Cara Membuat Tabel Responsive

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Hanifah Nurbaeti February 8, 2021

Di bawah ini kita akan mempelajaricara membuat tabel responsif.

Tabel Responsif

Tabel responsif akan menampilkan scroll bar horizontal jika layar terlalu kecil untuk menampilkan konten lengkap. Ubah ukuran jendela browser untuk melihat efeknya:

Untuk membuat tabel responsif, tambahkan elemen container dengan overflow-x: auto di sekitar <table> :

Contoh

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  border: 1px solid #ddd;
}

th, td {
  text-align: left;
  padding: 8px;
}

tr:nth-child(even){background-color: #f2f2f2}
</style>
</head>
<body>

<h2>Responsive Table</h2>
<p>Jika memiliki tabel yang terlalu lebar, kita dapat menambahkan elemen kontainer dengan overflow-x: auto di sekitar tabel, dan itu akan menampilkan scroll bar horizontal saat diperlukan. </p>
<p> Ubah ukuran jendela peramban untuk melihat efeknya. Cobalah untuk menghapus elemen div dan lihat apa yang terjadi pada tabel.</p>

<div style="overflow-x:auto;">
  <table>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
    </tr>
    <tr>
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
    </tr>
    <tr>
      <td>Adam</td>
      <td>Johnson</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
    </tr>
  </table>
</div>

</body>
</html>

Catatan: Di OS X Lion (di Mac), scrollbar disembunyikan secara default dan hanya ditampilkan saat digunakan (meskipun “overflow: scroll” atau auto disetel).