Tolong Buat Judul Tabel Tetap Menempel

• Tabel dengan banyak baris membuat pembacaan data menjadi tidak nyaman karena semakin jauh menggulir, semakin mudah lupa arti tiap kolom
• Cukup tambahkan position: sticky; dan top: 0; pada thead untuk menerapkan header tetap
• sticky memiliki dukungan browser sekitar 96% secara global, jadi tidak bisa dibilang sebagai fitur eksperimental
• Saat melihat baris di bagian bawah, seperti item ke-300, judul kolom tetap terlihat sehingga pengalaman menelusuri tabel menjadi lebih baik
• Implementasinya kecil tetapi dampaknya besar, sehingga layak diterapkan sebagai peningkatan kegunaan dasar pada halaman web yang menyediakan tabel panjang

---

Masalah header yang menghilang pada tabel panjang

• Pada dataset besar atau tabel dengan ratusan baris, setelah menggulir, header tabel menghilang keluar dari layar
• Saat turun hingga item ke-300, bisa menjadi sulit untuk mengecek kembali apa arti data di tiap kolom
• Semakin asing tabelnya bagi pengguna, semakin besar beban navigasi karena mereka harus membaca sambil mengingat arti tiap kolom

Menerapkan sticky pada thead

• Solusinya adalah menambahkan dua properti CSS berikut pada thead

position: sticky;
top: 0;

• Dengan menggunakan position: sticky bersama top: 0, header dapat ditetapkan di bagian atas layar saat menggulir
• sticky memiliki tingkat dukungan sekitar 96% secara global, sehingga dapat digunakan di banyak browser
• Perilaku sebenarnya dapat dilihat di contoh CodePen

[GN⁺]

Opini Hacker News

• Saya bisa menerima header tetap pada satu sumbu, tetapi masih menunggu hari ketika CSS mendukungnya di kedua sumbu: https://github.com/w3c/csswg-drafts/issues/8286

  • Salah satu pekerjaan kontrak tersulit yang pernah saya lakukan adalah ketika harus membuat kolom dan header sama-sama tetap. Kalau tabel standar, itu mudah, tetapi ini adalah tabel dinamis pihak ketiga VueJS yang kompleks dengan CSS-as-JS yang digenerasi, jadi saya butuh waktu lama hanya untuk mencari tahu dari mana CSS dan JS-nya berasal, dan akhirnya harus menimpa fungsi class JS serta CSS yang digenerasi. Saya merasa tidak enak kepada klien karena memakan waktu terlalu lama, dan sejak itu saya jadi jauh lebih berhati-hati memilih library di codebase Vue/React. Tabel adalah elemen dasar HTML, jadi saya tidak mengerti kenapa satu tugas sederhana perlu tiga lapis class JS dan CSS yang diimpor lewat JSON.
  • Saya mungkin sudah 8 tahun mengikuti issue asli yang melahirkan issue ini, dan ini bagian paling menyebalkan dari spesifikasi CSS. Kadang kita memang butuh tabel data yang sangat besar, dan ingin bagian atas tetap sambil tetap memakai overflow-x: auto, tetapi kita dipaksa memilih salah satu.

• Saya akui pengetahuan CSS saya hampir nol, tetapi saya tetap bisa membuat web app yang kurang lebih berjalan. Baru-baru ini saya mencoba membuat header tetap pada tabel monster berisi sekitar 20 ribu baris: https://www.datasciencemeta.com/rpackages Awalnya saya berharap ada sesuatu seperti class="table table-header-sticky" di class tabel Bootstrap, tetapi ternyata tidak ada. Setelah sekitar 20 menit mengutak-atik saran dari Stack Overflow, GPT, dan CodePen, selalu muncul efek samping aneh. Namun dengan CodePen dari artikel ini, semuanya berjalan dalam 2 menit, dan sekarang sedang saya deploy ke produksi.

• Membuat header tabel tetap terlihat mudah hanya dengan position: sticky;, tetapi begitu mulai menambahkan sesuatu ke isi tabel, kompleksitasnya langsung naik. Pada tabel dengan header tetap, saya menambahkan fitur yang menyimpan indeks baris pertama yang terlihat ketika pengguna menggulir isi lalu meninggalkan halaman, kemudian memulihkannya saat kembali. Namun posisinya selalu dipulihkan sekitar satu baris terlalu rendah. Ternyata baris ke-5 sebenarnya berada di paling atas tabel, tetapi tertutup oleh thead, sehingga baris ke-6 terlihat seperti baris pertama. Jadi saya menyesuaikan posisi scroll dengan memperhitungkan tinggi thead, tetapi kadang masih meleset beberapa piksel. Karena tabelnya besar, lazy loading dilakukan pada event scroll, dan akibat penggunaan layout tabel otomatis bawaan, sel header membungkus baris sehingga tinggi keseluruhan header berubah. Pada akhirnya saya memasang ResizeObserver pada thead untuk menyesuaikan posisi scroll secara dinamis saat tingginya berubah. [1] https://developer.mozilla.org/en-US/docs/Web/API/ResizeObser...

  • https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-marg...
  • Atau gunakan tabel dengan pagination saja. Ini terdengar seperti masalah yang muncul karena halaman infinite scroll.

• Saat mengimplementasikan ini, jika Anda ingin border header ikut tetap, bisa ditangani dengan memberi position: absolute, width: 100%, top: 0/bottom: 0, dan border-top/border-bottom pada table thead:before dan table thead:after.

• Saya berharap header tabel otomatis berperilaku seperti ini. Jika pengembang sampai sengaja memakai tag terkait dan melakukan pekerjaan tambahan, biasanya kemungkinan besar perilaku inilah yang mereka inginkan.

  • Pasang saja plugin browser yang bisa memuat stylesheet kustom di semua halaman. Namun belakangan makin banyak situs yang membuat tabel dengan 500 sebagai ganti, dan 45 lapis bertumpuk di dalam tiap, jadi sepertinya tidak akan berfungsi di tempat seperti itu.
  • Perubahan seperti ini tampaknya sangat mungkin merusak sesuatu dengan cara yang tidak terduga. Alasan utamanya mungkin karena sebelum CSS Grid muncul, banyak situs web memakai tabel untuk layout grid. Jika header menjadi tetap, layout seperti itu bisa rusak. Kegagalan besar semantik HTML adalah tabel diterima bukan sebagai “cara menampilkan data tabular”, melainkan sebagai “grid elemen arbitrer”.

• Di command line, cukup kirim header ke stderr dan isi ke stdout. Jika tidak, hasil heights | sort -k2 -nr akan menjadi George 186, Wally 173, NAME HEIGHT, tetapi jika header melewati stdout, urutannya menjadi NAME HEIGHT, George 186, Wally 173.

  • heights | (sed -u 1q; sort -k2 -nr) berjalan dengan benar. Sumber: https://stackoverflow.com/a/56151840
  • Jika menulis ke file, perlu beberapa percobaan lagi dan pemahaman shell yang lebih baik. Ini memang keterbatasan berkelanjutan dari model teks in-band saja, tetapi menyalahgunakan STDERR seperti ini sepertinya lebih membingungkan daripada membantu. Jika heights adalah file, bisa dilakukan seperti % head -1 heights ; sed 1,1d heights | sort -k2 -nr, dan jika heights adalah executable yang mahal untuk dijalankan dua kali, bisa seperti % heights > /tmp/heights ; head -1 /tmp/heights ; sed 1,1d /tmp/heights | sort -k2 -nr. Bisa juga dipipe ke awk. Opsi lain memang kurang nyaman, tetapi lebih tidak mengejutkan, dan tetap bekerja meski penulis executable punya pemikiran berbeda.
  • Dalam kasus ini, mana yang lebih baik? Mengirim header ke stderr, atau hanya mencetak header ketika stdout adalah TTY?

• Ini tidak berfungsi untuk waktu yang lama. Dulu Chrome menonaktifkan position: sticky pada elemen thead dan tr: https://issues.chromium.org/issues/41303743 Saya ingat tabel dukungan browser hampir semuanya terlihat hijau, tetapi justru tidak berjalan pada tabel di Chrome.

  • Mengejutkan bahwa sekarang sesederhana ini. Dulu ketika saya membutuhkannya, agar berfungsi di berbagai browser, saya harus memasukkan berbagai macam pernak-pernik ke HTML dan CSS. Meski begitu saya tidak terlalu terkejut, karena pengembangan web pada umumnya memang seperti itu.

• Ada juga pihak yang lebih ingin mengatakan “tolong jangan lakukan itu”: https://news.ycombinator.com/item?id=32998091

  • Untuk halaman web biasa, saya sepenuhnya setuju. Saya sering menghapus elemen tetap dengan uBlock Origin karena lebih cepat daripada menulis style Stylus, dan style umum yang diterapkan ke seluruh situs juga cukup berhasil. Namun artikel aslinya membahas tabel data dengan kolom header tetap, jadi usulan ini sebenarnya cukup berguna.
  • Itu membahas header tetap untuk seluruh halaman web. Pada tabel, situasinya benar-benar berbeda. Saya sangat tidak suka ketika melihat tabel dengan sekitar selusin kolom angka, lalu begitu menggulir sedikit ke bawah, kita tidak lagi tahu mana yang mana.
  • Apa yang buruk dari properti sticky?

• CodePen terlihat lebih baik jika top diberi offset sebesar border. Misalnya memakai -1px alih-alih 0 dapat menghindari isi tabel terlihat menembus di atas header. Perbandingan: https://codepen.io/bradleytaunt/pen/bGZyJBj Versi perbaikan: https://codepen.io/alokmenghrajani/pen/ExMBQow

• Saya mengusulkan pendekatan menggunakan tinggi viewport terbatas alih-alih header tetap, sehingga header selalu terlihat. Bisa seperti DataGridXL(https://datagridxl.com). Sebagai catatan, saya yang membuatnya.

  • Hanya terpikir begitu saja, tetapi pendekatan ini sangat sulit dinavigasi tanpa perangkat penunjuk, misalnya hanya dengan keyboard.
  • Bukan bermaksud mengkritik, tetapi di mobile saya tidak pernah menyukai pendekatan seperti ini. Menurut saya konten seharusnya bergulir bersama halaman.