HTML Table with Fixed Header

Banyak hal yang terlihat sederhana tapi ternyata bikin sakit kepala, salah satunya adalah “Scrollable HTML Table”. Apasih susahnya bikin table pake HTML, tinggal pake tag <table>, <tr> dan <td> aja? Susahnya adalah kalo kita mau bikin yang fieldnya banyak, kalo cuma row-nya yang banyak saya sudah bikin html table pake paging dengan javascript.

Saya mendambakan html table sederhana dengan scroll vertikal dan horizontal yang punya fixed header biar kalo table nya di-scroll headernya gak hilang, pokoknya mirip komponen Grid di desktop application.

Sebagai seorang programmer yg malas, saya langsung nyari solusinya pake google. Ternyata saya tdk menemukan satupun solusi mudah dan murah (maksudnya kalo pake javascript gak usah yg gede2 kaya’ jquery, mootools, dll).

Saya nemuin beberapa solusi yang sudah ada, diantaranya:

  • Jawaban di stackoverflow.com: , yg ini kalo gak salah pake JQuery, bisa bikin table yang rumit, ada field yang pake colspan atau rowspan, udah gitu juga selain fixed header ngedukung fixed column juga. Tapi kalo ngeliat source-code nya kok ada pengaturan lebar tiap kolom (field), padahal ini yg mau saya hindari. Saya mau table nya seperti layaknya HTML table biasa yang bisa ngatur sendiri berapa lebarnya.
  • Ada lagi di imaputz.com, cssbakery.com, dan di cssplay.co.uk tapi semuanya gak punya horizontal scroll. Sedangkan saya mau yg pake horizontal scroll maupun vertical scroll, pokoknya saya mau terima beres, saya cuma bikin table biasa trus nanti dia bisa otomatis scroll nya muncul.

Akhirnya karena tidak menemukan solusi yang tepat guna, berbekal teori2 dari table2 di atas dengan terpaksa saya bikin sendiri deh html table sederhana yg cuma punya 1 fixed row dengan sedikit javascript+css.

Kekurangannya ada banyak, yaitu: cuma punya 1 fixed row, tidak punya fixed column, fungsi fix() harus dijalankan berkali-kali untuk dapat menyinkronisasi lebar cell pada header dan data tanpa mengorbankan sisi visual table[2].

Yang fungsi fix() ini yg saya masih kurang ngerti[1], waktu saya coba hitung berapa kali fungsi fix() dijalanin ternyata browser yg pake Webkit (Safari & Chrome) harus menjalankan antara 30x sampai 40x baru sinkron lebar kolom antara header dan data, sedangkan Firefox (pake Gecko) cuma dibawah 12x sama seperti Opera (pake Presto).

Untuk sekarang saya gak mau repot, biarin aja mau dieksekusi 100x juga gak apa2, yg penting kepala udah gak pusing lagi gara2 html table.

Udah ah.

— Edit 1 : Misteri yang menyelimuti fungsi fix() sudah terkuak. Ternyata di CSS nya harus ditambah box-sizing: border-box; -moz-box-sizing: border-box;. Di Google Chrome fungsi fix() cuma dijalanin 1x sementara di Mozilla Firefox dijalanin 2x. Tapi anehnya justru di Mozilla Firefox ukuran kolomnya jadi beda antara header dan data kalo di pinggir kanan header dikasih garis (border). Aneh, ada bug?

— Edit 2 : Kekurangan yang lain adalah tidak mendukung colspan dan rowspan untuk header dan data baris pertama. Sebenarnya tidak susah untuk modifikasi agar bisa colspan dan atau rowspan tapi saya belum bisa (baca: malas) bikin yang fleksibel.

138total visits,1visits today

Leave a Reply

sedjat1