TipsTrik79: Program PHP | Cara membuat Scrolling Pada Tabel

Berikut ini saya akan coba jelaskan bagaimana cara untuk membuat scrolling pada tabel. kebetulan kemarin kita udah bahas cara menampilkan data dari database MySQL, nah yang menjadi permasalahannya adalah, bagaimana jika nantinya data yang harus ditampilkan itu dalam jumlah yang banyak atau mungkin terlalu lebar kesamping. namun pada pembahasan kali ini kita tidak akan membahas mengenai database karna itu sudah pernah kita bahas sebelumnya. okeh langsung aja ke langkah-langkahnya, ketikkan Script HTML berikut ini :


<table id="myScrollTable" border="0" cellpadding="4" cellspacing="1" align="center">
<tbody>
<tr bgcolor="#009966">
    <th>NIS</th>
    <th>NAMA</th>
    <th>ALAMAT</th>
    <th>JURUSAN</th>
    <th>KELAS</th>
    <th>SEMESTER</th>
</tr>
<tr bgcolor="#99FFFF">
    <td>12345678</td>
    <td>Siti Nurbaya</td>
    <td>Jl. Pendidikan No. 56</td>
    <td>IPS</td>
    <td>XI</td>
    <td>Genap</td>
</tr>
<tr bgcolor="#99FFFF">
    <td>12345678</td>
    <td>Siti Nurbaya</td>
    <td>Jl. Pendidikan No. 56</td>
    <td>IPS</td>
    <td>XI</td>
    <td>Genap</td>
</tr>
<tr bgcolor="#99FFFF">
    <td>12345678</td>
    <td>Siti Nurbaya</td>
    <td>Jl. Pendidikan No. 56</td>
    <td>IPS</td>
    <td>XI</td>
    <td>Genap</td>
</tr>
<tr bgcolor="#99FFFF">
    <td>12345678</td>
    <td>Siti Nurbaya</td>
    <td>Jl. Pendidikan No. 56</td>
    <td>IPS</td>
    <td>XI</td>
    <td>Genap</td>
</tr>
<tr bgcolor="#99FFFF">
    <td>12345678</td>
    <td>Siti Nurbaya</td>
    <td>Jl. Pendidikan No. 56</td>
    <td>IPS</td>
    <td>XI</td>
    <td>Genap</td>
</tr>
<tr bgcolor="#99FFFF">
    <td>12345678</td>
    <td>Siti Nurbaya</td>
    <td>Jl. Pendidikan No. 56</td>
    <td>IPS</td>
    <td>XI</td>
    <td>Genap</td>
</tr>
<tr bgcolor="#99FFFF">
    <td>12345678</td>
    <td>Siti Nurbaya</td>
    <td>Jl. Pendidikan No. 56</td>
    <td>IPS</td>
    <td>XI</td>
    <td>Genap</td>
</tr>
</tbody>
</table>

kemudian dibagian atas Tabel tambahkan style css berikut ini :


<style>
#myScrollTable tbody{
clear:both;
border:0px solid 3FF6600;
height:300px;
overflow:auto;
float:left;
width:400px;
background:#E2E6E7;
}
</style>

Simpan file, kemudian jalankan. maka hasilnya akan menjadi seperti berikut ini :