Table fixed header and scrollable body

Table merupakan salah satu elemen html yang cukup sering digunakan. Terutama apabila kita mempunya data yang cukup banyak. Dengan adanya table membuat kita lebih mudah dalam membaca dan mengolah data sesuai kebutuhan kita.

Ada beberapa tag dasar dalam membuat table sederhana

1. <table>
2. <thead>
3. <tbody>
4. <tr>
5. <th>
6. <td>

Dari keenam tag diatas, ada tag yang penting yang harus ada dalam sebuah table. Tag tersebut yaitu <table>, <tr>, dan <td>. Selain ketiga tag tersebut adalah opsional.  Bisa ditambahkan bisa juga tidak ditambahkan. Namun untuk saran saya lebih baik ditambahkan.

Nah, kali ini kita akan belajar bagaimana membuat table dengan header fixed dan scrollabe body, baik scroll x maupun scroll y. Table seperti ini sering digunakan apabila kita mempunyai data dengan detail yang banyak. Hal ini sangat mempermudah pengguna dalam mengolah data.

Mari kita mulai, pertama kita buat htmlnya terlebih dahulu. Berikut adalah kode untuk file html.

Kemudian kita buat kode css untuk memperindah tampilan table

Setelah itu, kita buat kode untuk javascriptnya

Hasil yang didapatkan, kurang lebih seperti gambar di bawah ini 

Untuk kode lengkapnya bisa dilihat di sini