Overflow Table

Panel gulir dari chapter sebelumnya menyelamatkan tabel lebar, tetapi dalam bentuk dasarnya ia masih kasar: menggulir ke kanan berarti kehilangan pandangan pada kolom kunci, dan tidak ada isyarat bahwa masih ada kolom tersembunyi di sebelah kanan. Chapter penutup section ini memoles detail-detail itu: kolom pertama yang menempel di tepi kiri panel, petunjuk arah gulir dari lapisan gradien, cadangan ruang scrollbar, dan batas wajar teknik ini — kapan lebih baik tabelnya dipecah daripada digulir.

Memoles Panel Gulir #

Dua penyempurnaan kecil langsung dari chapter Overflow dan Scrolling:

.panel-tabel-lebar {
  overflow-x: auto;
  scrollbar-gutter: stable;
  border: 1px solid #cbd5d1;
  border-radius: 10px;
}

scrollbar-gutter: stable memesan tempat scrollbar sejak awal sehingga tinggi konten panel tidak melompat saat scrollbar tampil mendadak. Border dan border-radius pada panel memberi bingkai yang menegaskan bahwa area ini komponen tersendiri — isyarat visual yang konsisten dengan scrollbar di dalamnya. Ingat pula kombinasi tabindex="0" dan role="region" dari chapter Responsive Table agar panel terjangkau keyboard.

Kolom Pertama yang Menempel #

Teknik sticky tidak hanya untuk header — ia bekerja pada sumbu mana pun. Kolom pertama yang menempel di kiri memakai pola yang sama dengan nilai left:

.panel-tabel-lebar th:first-child,
.panel-tabel-lebar td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background-color: #ffffff;
  box-shadow: 2px 0 0 #cbd5d1;
}

1. position: sticky; left: 0 menahan sel pertama di tepi kiri panel selama tabel menggulir ke samping.
2. background-color wajib — tanpa latar, isi kolom lain terlihat menembus sel yang menempel.
3. z-index: 1 menjaga sel lengket berada di atas sel tetangganya saat keduanya bertumpuk.
4. box-shadow: 2px 0 0 menggambar garis pemisah di sisi kanan sel lengket.

Garis pemisah sengaja dibuat dari box-shadow, bukan border, karena ada catatan jujur di baliknya: pada mode collapse, border sel digambar pada lapisan tabel sehingga perilakunya saat sel menempel tidak seragam antarbrowser. box-shadow menempel pada kotak sel itu sendiri dan selalu ikut — pilihan yang aman di semua browser. Bila tabelmu bergaris zebra, sel lengket juga butuh latar yang mengikuti warna striping barisnya, atau lepas striping pada kolom pertama saja.

Petunjuk Gulir dari Lapisan Gradien #

Scrollbar kecil mudah terlewat; petunjuk yang lebih terlihat adalah bayangan samar di tepi panel — tampil hanya bila masih ada konten di baliknya. Triknya memakai empat lapisan background sekaligus, dan satu property yang belum kita pakai: background-attachment. Nilai local membuat latar ikut menggulir bersama konten, sedangkan scroll menahannya relatif terhadap kotak panel:

.panel-bayangan {
  overflow-x: auto;
  background-color: #ffffff;
  background-image: linear-gradient(to right, #ffffff 30%, transparent), linear-gradient(to left, #ffffff 30%, transparent), linear-gradient(to right, #cbd5d1 40%, transparent), linear-gradient(to left, #cbd5d1 40%, transparent);
  background-position: left, right, left, right;
  background-size: 24px 100%, 24px 100%, 8px 100%, 8px 100%;
  background-repeat: no-repeat;
  background-attachment: local, local, scroll, scroll;
}

Mekanismenya: bayangan abu-abu selalu ada di kedua tepi panel, tetapi penutup putih bergerak mengikuti konten. Saat panel berada di ujung kiri, penutup kiri menutupi bayangan kirinya; begitu konten menggulir, penutup bergeser dan bayangan muncul — memberi isyarat bahwa sisi itu masih menyimpan kolom. Saat menggulir mencapai ujung kanan, penutup kanan kembali menutup bayangannya. Urutan lapisan penting: yang pertama ditulis berada paling atas, sehingga penutup dipasang sebelum bayangan.

Demo berikut memuat tabel enam kolom ke dalam panel sempit — kolom Produk menempel di kiri, dan bayangan di tepi kanan menandai kolom yang belum terbaca:

Kapan Lebih Baik Memecah Tabel #

Panel gulir dan kolom lengket punya batas. Tiga kondisi yang menandakan tabel perlu dirombak, bukan dipoles:

• Kolomnya lebih dari enam atau tujuh — bahkan dengan kolom lengket, pengguna berpindah “kamar” saat membaca kolom terjauh; seleksikan kolom yang benar-benar dibutuhkan konteks itu.
• Datanya berhierarki — baris grup dan rincian bercampur; dua tabel terpisah atau halaman detail per entitas lebih jujur strukturnya.
• Konteks pembacanya berbeda-beda — tim keuangan butuh kolom harga, tim gudang butuh stok; tabel yang sama tak harus melayani keduanya sekaligus.

Styling hanya bisa memperbaiki penyajian; keputusan seperti ini milik perancangan data.

Ringkasan #

Panel gulir naik kelas dengan tiga penyempurnaan: kolom pertama yang menempel lewat position: sticky; left: 0 plus latar dan z-index wajib, petunjuk arah gulir dari lapisan gradien yang membedakan background-attachment: local dan scroll, serta scrollbar-gutter: stable yang menstabilkan tinggi panel. Kebijakan terakhirnya juga sudah jelas: bila kolom terlalu banyak atau data berhierarki, pecah tabelnya alih-alih memaksakan pengguliran. Section Tables dan Lists resmi selesai — mulai section berikutnya, Transitions dan Animations, state-state seperti hover baris dan panel yang menggulir ini akan kita hidupkan: perpindahan warna dan posisi yang selama ini terjadi mendadak akan dihaluskan dengan transition dan transform.