Table Body Scroll
Membuat Table dengan HTML itu sangat mudah. Anda dapat membuatnya dengan tag <table>, <thead>, <tbody>, <tr>, <th> dan <td> seperti pada coding HTML dibawah ini.
<html> <body> <table class="scroll"> <thead> <tr><th>Header 1</th><th>Header 2</th><th>Header 3</th><th></th></tr> </thead> <tbody> <tr><td>Content 1</td><td>Content 2</td><td>Content 3</td></tr> <tr><td>Content 1</td><td>Content 2 Content 2</td><td>Content 3</td></tr> <tr><td>Content 1</td><td>Content 2 Content 2 Content 2</td><td>Content 3</td></tr> <tr><td>Content 1</td><td>Content 2 Content 2 Content 2 Content 2</td><td>Content 3</td></tr> <tr><td>Content 1</td><td>Content 2 Content 2 Content 2 Content 2 Content 2</td><td>Content 3</td></tr> <tr><td>Content 1</td><td>Content 2</td><td>Content 3</td></tr> <tr><td>Content 1</td><td>Content 2</td><td>Content 3</td></tr> <tr><td>Content 1</td><td>Content 2</td><td>Content 3</td></tr> <tr><td>Content 1</td><td>Content 2</td><td>Content 3</td></tr> <tr><td>Content 1</td><td>Content 2</td><td>Content 3</td></tr> <tr><td>Content 1</td><td>Content 2</td><td>Content 3</td></tr> <tr><td>Content 1</td><td>Content 2</td><td>Content 3</td></tr> <tr><td>Content 1</td><td>Content 2</td><td>Content 3</td></tr> <tr><td>Content 1</td><td>Content 2</td><td>Content 3</td></tr> <tr><td>Content 1</td><td>Content 2</td><td>Content 3</td></tr> <tr><td>Content 1</td><td>Content 2</td><td>Content 3</td></tr> <tr><td>Content 1</td><td>Content 2</td><td>Content 3</td></tr> <tr><td>Content 1</td><td>Content 2</td><td>Content 3</td></tr> <tr><td>Content 1</td><td>Content 2</td><td>Content 3</td></tr> <tr><td>Content 1</td><td>Content 2</td><td>Content 3</td></tr> </tbody> </table> </body> </html>
Untuk membuat tampilan table tersebut lebih menarik, kita gunakan CSS.
Dengan CSS kita juga bisa membuat body table tersebut memiliki vertical scroll bar seperti pada gambar diatas.
Body table dapat kita scroll dengan setting CSS property height dan property display:block.
Berikut ini coding CSS selengkapnya.
<style type="text/css">
table.scroll {width:700px;border:1px #a9c6c9 solid;font:12px verdana,arial,sans-serif;color:#333333;}
table.scroll thead {display:table;width:100%;}
table.scroll tbody {display:block;height:300px;overflow:auto;float:left;width:100%;}
table.scroll tbody tr {display:table;width:100%;}
table.scroll th, td {width:33%;padding:8px;}
table.scroll th {background-color:#000099;color:#ffffff;}
table.scroll tr:hover td {background:#a0a0a0;color:#ffffff;}
table.scroll tr:nth-child(odd) {background-color:#c0c0c0;}
table.scroll tr:nth-child(even) {background-color:#f0f0f0;}
</style>
Pada coding CSS tersebut juga disertakan table hover dan table strip (zebra color).
Selamat mencoba. semoga berhasil.