Responsive Table

Semua styling tabel yang kita bangun mengasumsikan ruang cukup — dan di layar ponsel asumsi itu runtuh. Tabel lima kolom yang lega di desktop dipaksa menyempit: setiap kolom hanya mendapat sebilah ruang, teks turun berbaris-baris pendek, dan barisnya menjulang. Tabel memang bukan elemen yang responsif secara alami, tetapi ada dua strategi yang andal: membiarkan tabel tetap lebar lalu menggulirnya di dalam panel, atau menumpuknya menjadi kartu per baris. Chapter ini membahas keduanya lengkap dengan pertimbangan memilihnya.

Mengapa Tabel Rawan di Layar Sempit #

Kolom tabel memiliki lebar minimum yang ditentukan kontennya: satu kata panjang atau satu nomor faktur tidak bisa dipecah sembarangan. Saat total lebar minimum semua kolom melebihi lebar layar, browser menekan kolom serapat mungkin; teks melipat menjadi kolom sempit bertingkat, dan perbandingan antarbaris jadi mustahil. Mencegah horizontal overflow pada halaman tetap berlaku — yang berbeda di sini adalah solusinya: tabel yang memang butuh lebar sebaiknya diberi jalur gulirnya sendiri, bukan dipaksa ramping.

Strategi 1: Panel Gulir Horizontal #

Strategi paling pragmatis: biarkan tabel mempertahankan lebar layaknya, dan letakkan di dalam wadah yang menggulir:

.pembungkus-tabel {
  overflow-x: auto;
}

.tabel-perbandingan {
  min-width: 560px;
  border-collapse: collapse;
}

1. overflow-x: auto pada wadah menjadikannya scroll container horizontal — scrollbar hanya tampil saat dibutuhkan. Ini pengecualian yang sah dari aturan mencegah overflow halaman, karena penggulirannya terjadi di dalam komponen.
2. min-width: 560px pada tabel menetapkan batas bawah lebar: di atas 560px tabel mengikuti wadah, di bawahnya tabel tetap 560px dan wadahlah yang menggulir.

Demo berikut menaruh tabel lima kolom ber-min-width ke dalam panel sempit — gulir ke samping untuk menjangkau kolom selanjutnya:

Strategi 2: Kartu Bertumpuk dengan data-label #

Strategi kedua merombak tampilan pada breakpoint tertentu: setiap baris menjadi kartu, dan nama kolom digambar ulang di atas setiap nilai lewat data-label. Polanya murni CSS — dibangun dari attribute selector dan content: attr() yang kita pakai pada chapter ::before:

@media (max-width: 540px) {
  .tabel-rapat thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .tabel-rapat tr, .tabel-rapat td {
    display: block;
  }
  .tabel-rapat td {
    padding: 6px 0;
  }
  .tabel-rapat td::before {
    content: attr(data-label);
    display: block;
    font-size: 12px;
    color: #6b7280;
  }
}

1. thead disembunyikan secara visual dengan pola visually hidden — tetap ada bagi pembaca layar, hilang dari tampilan.
2. display: block pada tr dan td memecah baris tabel menjadi tumpukan blok biasa.
3. td::before dengan content: attr(data-label) menggambar nama kolom dari atribut di setiap sel.

Markupnya menuntut atribut pelengkap di setiap sel data:

<tr>
  <td data-label="Topik">Perencanaan menu bulanan</td>
  <td data-label="Waktu">10.00</td>
  <td data-label="Pic">Sari</td>
</tr>

Demo berikut menjalankan deklarasi yang sama di dalam bingkai selebar ponsel, sehingga hasil pada breakpoint terlihat tanpa mengecilkan jendela:

Kejujuran soal kompleksitasnya penting: pola ini memaksa menulis data-label di setiap sel, dan setiap kolom baru berarti menyentuh ulang seluruh markup. Selector per sel juga semakin rumit bila layout tiap kolom harus berbeda. Karena itu pola kartu layak untuk tabel kecil — dua sampai empat kolom dengan nilai pendek — sementara tabel data yang besar lebih jujur diberi panel gulir.

Memilih Strategi #

Patokan yang bisa dipegang: bila nilai antarkolom harus dibandingkan, pilih panel gulir; bila setiap baris adalah “entitas” yang dibaca utuh satu per satu, kartu bertumpuk memberi pengalaman yang lebih baik di ponsel.

Ringkasan #

Tabel tidak menyusut dengan anggun di layar sempit, karena lebar minimum kolomnya ditentukan konten. Panel gulir horizontal — wadah overflow-x: auto plus min-width pada tabel — menjaga tabel utuh dengan biaya markup nol dan menjadi pilihan utama; pola kartu bertumpuk berbasis data-label memberi pengalaman terbaik untuk tabel kecil dengan biaya markup yang harus dijaga. Panel gulirnya sendiri masih bisa disempurnakan — kolom yang menempel dan petunjuk arah gulir adalah topik penutup section ini.