Tabel yang isinya banyak tentunya semakin ke bawah (scroll) judul masing-masing kolom akan tertutup. Berikut trik css supaya judul kolom atau thead selalu tampil walaupun scroll sepanjang mungkin:
<style type="text/css">
#afika.affix {
position: fixed;
top: 51px;
width: 95.3%;
background-color: #fff;
box-shadow: 0 8px 4px -2px #888888;
-moz-box-shadow: 0 8px 4px -2px #888888;
-webkit-box-shadow: 0 8px 4px -2px #888888;
}
</style>
<table width="100%" cellpadding="5" cellspacing="0">
<thead id="fixed">
<tr>
<th width="3%">No</th>
<th width="97%">Keterangan</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script type="text/javascript">
$('#fixed').affix({
offset: {
top: $('header').height()
}
});
</script>
Atau
<div class="fixed">
<table>
<thead>
<tr><th>th1</th><th>th2</th><th>th3</th></tr>
</thead>
</table>
</div>
<div>
<table>
<thead>
<tr><th>th1</th><th>th2</th><th>th3</th></tr>
</thead>
<tr><td>td content</td><td>td content</td><td>td content</td></tr>
<tr><td>td content</td><td>td content</td><td>td content</td></tr>
<tr><td>td content</td><td>td content</td><td>td content</td></tr>
<tr><td>td content</td><td>td content</td><td>td content</td></tr>
<tr><td>td content</td><td>td content</td><td>td content</td></tr>
<tr><td>td content</td><td>td content</td><td>td content</td></tr>
<tr><td>td content</td><td>td content</td><td>td content</td></tr>
<tr><td>td content</td><td>td content</td><td>td content</td></tr>
<tr><td>td content</td><td>td content</td><td>td content</td></tr>
<tr><td>td content</td><td>td content</td><td>td content</td></tr>
<tr><td>td content</td><td>td content</td><td>td content</td></tr>
<tr><td>td content</td><td>td content</td><td>td content</td></tr>
<tr><td>td content</td><td>td content</td><td>td content</td></tr>
<tr><td>td content</td><td>td content</td><td>td content</td></tr>
<tr><td>td content</td><td>td content</td><td>td content</td></tr>
<tr><td>td content</td><td>td content</td><td>td content</td></tr>
<tr><td>td content</td><td>td content</td><td>td content</td></tr>
<tr><td>td content</td><td>td content</td><td>td content</td></tr>
<tr><td>td content</td><td>td content</td><td>td content</td></tr>
<tr><td>td content</td><td>td content</td><td>td content</td></tr>
<tr><td>td content</td><td>td content</td><td>td content</td></tr>
<tr><td>td content</td><td>td content</td><td>td content</td></tr>
<tr><td>td content</td><td>td content</td><td>td content</td></tr>
<tr><td>td content</td><td>td content</td><td>td content</td></tr>
<tr><td>td content</td><td>td content</td><td>td content</td></tr>
<tr><td>td content</td><td>td content</td><td>td content</td></tr>
<tr><td>td content</td><td>td content</td><td>td content</td></tr>
<tr><td>td content</td><td>td content</td><td>td content</td></tr>
<tr><td>td content</td><td>td content</td><td>td content</td></tr>
<tr><td>td content</td><td>td content</td><td>td content</td></tr>
<tr><td>td content</td><td>td content</td><td>td content</td></tr>
<tr><td>td content</td><td>td content</td><td>td content</td></tr>
</table>
</div>
<style type="type/css">
.fixed{
position: fixed;
top: 0;
z-index: 0;
}
th,td{
width: 200px;
padding: 3px;
}
th{
background: #ccc;
}
</style>
Sekian, terimakasih atas kunjungannya.
Salam,
PHP Aku : Membangun web terorganisasi dan mudah dimengerti, contoh tutorial dengan menggunakan HTML, CSS, JavaScript, SQL, PHP, dan XML.
EmoticonEmoticon