Kadang Kita perlu menampilkan tabel yang berisi sangat banyak data didalam website yang sedang dibuat. Permasalahan yang sering kali muncul adalah header tabel tersebut tidak akan lagi terlihat setelah Kita melakukan scroll untuk melihat data-data di bawahnya.

Kita sering menginginkan tampilan seperti layaknya tabel-tabel di aplikasi desktop, seperti excel atau control-control seperti listview (pada windows), yang dimana header dari tabel yang dimaksud tidak ikut ter-scroll ketika hendak melihat data-data dibawahnya.

Dengan CSS 3, Kita dapat memanfaatkan position: sticky pada header tabel yang diinginkan. Kita tidak dapat menggunakan position: sticky ini pada tah thead, tbody ataupun tr, tapi Kita dapat menggunakannya pada tag cell seperti td atau th.

position: sticky

Elemen html yang diberikan position: sticky akan diposisikan pada posisi tampilan di layar sesuai dengan offset relatif dari parent elemen-nya. Misalnya tabel berada di dalam div (relative-parent) yang di set position: relative, dan posisi Y di layar sebelum scroll berada di 50px dan tinggi nya 100px, maka ketika scroll sebanyak 100px parent element ini akan tampil di layar mulai dari pixel ke 0 sampai 50px (posisi top nya ada di -50px). Dari sini elemen yang di set position: sticky akan selalu tampil dibawah atribut top yang di set, dan hanya akan ikut ter-scroll ketika posisi scroll dokumen sudah lebih besar dari posisi Y + Heigh dari relative-parent nya.

Pada contoh di atas, terlihat div dengan class relative-parent memiliki position: relative, dan tag th memiliki position: sticky dengan posisi top: 0px, yang maksudnya ketika document di scroll, posisi top dari tag th ini akan berada pada posisi 0px.

Kita dapat mengubah properti top dari tag th menjadi nilai lain, misalnya 50px, maka posisi header ketika di scroll tidak akan menempel di paling atas, tapi ada jeda sebesar 50 pixel dari posisi atas.

Selain dapat digunakan pada satu header tabel, properti ini juga dapat dimanfaatkan untuk membuat posisi beberapa header tabel menjadi fixed, Berikut adalah contoh penggunaan position: sticky yang lebih kompleks dengan menggunakan beberapa header:

Kesimpulan

Sebenarnya properti position: sticky ini tidak hanya diperuntukan untuk header tabel, properti ini dapat dugunakan pada tag-tag tampilan seperti div, p, dan sebagainya. Tapi tentunya kegunaannya sangat terasa dan lumrah ditemui untuk header tabel.

Dengan adanya properti position: sticky pada css membuat fleksibilitas dalam mengatur tampilan web menjadi lebih mudah, dan semakin meminimalisir penggunaan Javascript untuk modifikasi tampilan website.

Terima Kasih atas waktunya, semoga bermanfaat, dan sampai berjumpa pada artikel selanjutnya.

Iklan