Table header to stay fixed at the top when scrolling - php

Question

I am trying to design an HTML table where the header will stay fixed at the top of the page while scrolling down, but it is not working. Below is my html code....
<table align="center">
<?php
$select = "SELECT * FROM register where r_bid='".$_SESSION["id"]."' order by `name` ";
$result = mysql_query($select) or die(mysql_error());
$res = mysql_query("select * from regi_balic where b_id='".$_SESSION["id"]."'");
$row1=mysql_fetch_array($res);
$i=1;
echo'<thead><tr align="center">
<th width=3%><font size=3><strong>No.</strong></font></th>
<th width=10%><font size=3><strong>IC</strong></font></th>
<th width=12%><font size=3><strong>Name</strong></font></th>
<th width=12%><font size=3><strong>Reference</strong></font></th>
<th width=2%><font size=3><strong>Age</strong></font></th>
<th width=12%><font size=3><strong>Occupatin</strong></font></th>
<th width=5%><font size=3><strong>Mobile No</strong></font></th>
<th width=2%><font size=3><strong>Delete</strong></font></th>
</tr></thead>';
while($row = mysql_fetch_array($result))
{
echo '<tbody><tr>
<td width="3%" align="center" ><font size=3>'.$i.'</font></td>
<td width="10%"><font size=3>'.$row1['name'].'</font></td>
<td width="12%" align="left" ><font size=3>
<a href="edit_detail.phpid='.$row["r_id"].'
&cand_id='.$_SESSION["id"].'&email='.$row["email"].'">'.$row['name'].'</a></font></td>
<td width="12%" align="center" ><font size=3>'.$row['reference'].'</font></td>
<td width="2%" align="right" style="padding-right:8px" >
<fontsize=3>'.$row['age'].'</font></td>
<td width="12%" align="right" style="padding-right:8px"><font
size=3>'.$row['occupation'].'</font></td>
<td width="5%" align="right"><font size=3>'.$row['mob_no'].'</font></td>
<td width="2%"><a href="process_del_client.php?id='.$row['r_id'].'" onClick="return
ConfirmSubmit(\'Are You sure ?\')"><img src = "images/delete.png"></a></td>
</tr></tbody>';
$i++;
}
echo '</table></div></center>';
?>
</div>
and this is my CSS:
.list {
height: 409px;
width: 80%;
overflow: scroll;
}

Answer 1

Something like this? http://jsbin.com/fekoyi/1/edit
table {
height: 1000px; /* To force existence of a scrollbar. */
background: yellow; /* To aid seeing boundaries. */
}
th {
position: fixed; /* Fixes its position to the window. */
top: 0; /* Sets that fixed position to stick to the top of the window. */
width: 100%; /* Fills the width of the window; made it easier to see in your markup. */
background: pink; /* To aid seeing boundaries. */
}