Tabel Responsif di HP

Masalah Klasik: Tabel Lebar vs Layar Sempit

Tabel yang sempurna di laptop bisa menjadi bencana di HP. Tabel 6 kolom di layar 360px pasti bermasalah: kolomnya kepotong dan tak terlihat, atau browser memaksa semua kolom muat sehingga teks mengecil tak terbaca. Di Indonesia mayoritas orang membuka website dari HP, jadi tabel yang rusak di layar kecil berarti sebagian besar pengunjung tidak bisa membaca datamu.

Tabel HTML secara default ingin menampilkan semua kolomnya sekaligus dalam satu baris. Ia tidak bisa "melipat" dirinya seperti teks paragraf, jadi kita harus memberinya instruksi khusus untuk layar kecil.

Contoh 1: Solusi Standar (Wrapper Scroll Horizontal)

Solusi paling aman dan sederhana: bungkus tabel dalam <div> yang bisa di-scroll ke samping.

<div style="overflow-x: auto;">
  <table border="1">
    <tr>
      <th>Hari</th>
      <th>07.00</th>
      <th>08.00</th>
      <th>09.00</th>
      <th>10.00</th>
      <th>11.00</th>
    </tr>
    <tr>
      <td>Senin</td>
      <td>MTK</td>
      <td>MTK</td>
      <td>IPA</td>
      <td>IPS</td>
      <td>B. Indo</td>
    </tr>
  </table>
</div>

Cara kerjanya: overflow-x: auto menyuruh div pembungkus menampilkan scroll horizontal kalau isinya lebih lebar. Hasilnya hanya tabel yang bergeser saat digeser jari, sisa halaman tetap diam. Pengguna tetap bisa membaca semua kolom dengan menggeser. (Di seri CSS nanti, style inline ini diganti dengan class agar lebih rapi.)

Contoh 2: Tabel Realistis dengan Banyak Kolom

Contoh nyata, misalnya rekap penjualan harian warkop:

<div style="overflow-x: auto;">
  <table border="1">
    <caption>Rekap penjualan minggu ini (gelas)</caption>
    <thead>
      <tr>
        <th scope="col">Menu</th>
        <th scope="col">Senin</th>
        <th scope="col">Selasa</th>
        <th scope="col">Rabu</th>
        <th scope="col">Kamis</th>
        <th scope="col">Jumat</th>
        <th scope="col">Total</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Kopi Tubruk</th>
        <td>20</td>
        <td>18</td>
        <td>22</td>
        <td>25</td>
        <td>30</td>
        <td>115</td>
      </tr>
      <tr>
        <th scope="row">Es Teh</th>
        <td>35</td>
        <td>40</td>
        <td>38</td>
        <td>42</td>
        <td>50</td>
        <td>205</td>
      </tr>
    </tbody>
  </table>
</div>

Delapan kolom mustahil muat di HP tanpa scroll, dan itu wajar. Yang penting tidak ada data yang hilang atau terpotong permanen. Contoh ini juga menggabungkan pelajaran sebelumnya: caption, thead/tbody, dan scope. Tabel yang baik adalah akumulasi semua praktik baik, bukan cuma satu trik.

Yang Tidak Boleh Dilakukan

• Jangan menyembunyikan kolom dengan CSS di HP. Data yang hilang sama dengan informasi yang hilang.
• Jangan memperkecil font sampai tak terbaca demi memuat semua kolom. Antara scroll horizontal dan teks tak terbaca, scroll selalu menang.
• Jangan memutar tabel menjadi vertikal dengan trik CSS aneh. Selain membingungkan, trik seperti itu merusak cara screen reader membaca tabel.

Kesalahan Umum Pemula

SALAH: tidak membungkus tabel sama sekali.

<table border="1">
  <!-- tabel 8 kolom langsung di body -->
</table>

Di laptop terlihat baik-baik saja, jadi pemula mengira tidak ada masalah. Masalahnya baru muncul di HP: tabel melebar melebihi layar dan memaksa seluruh halaman ikut melebar, sehingga konten lain ikut kepotong. Selalu uji tabelmu dengan mengecilkan jendela browser.

SALAH: memakai width: 100% dan berharap tabel otomatis rapi.

<table border="1" style="width: 100%;">

Lebar 100% hanya membuat tabel selebar layar, tapi kolomnya tetap dipaksa muat sehingga isinya terjepit dan teks terpotong per huruf. Ini bukan solusi responsif, hanya memindahkan masalahnya.

Catatan teknis: Atribut style di sini hanya untuk demo cepat. Di proyek nyata, pindahkan ke file CSS dengan class seperti .table-wrapper: memisahkan struktur (HTML) dan tampilan (CSS) adalah fondasi kerja yang rapi. Teknik lanjutan seperti kolom pertama yang menempel saat di-scroll (position: sticky) dibahas di seri CSS.