title: Table header to stay fixed at the top when scrolling
body: <p>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....</p>
  
  <pre><code>&lt;table align="center"&gt;
  &lt;?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'&lt;thead&gt;&lt;tr align="center"&gt;
  &lt;th width=3%&gt;&lt;font size=3&gt;&lt;strong&gt;No.&lt;/strong&gt;&lt;/font&gt;&lt;/th&gt;
  &lt;th width=10%&gt;&lt;font size=3&gt;&lt;strong&gt;IC&lt;/strong&gt;&lt;/font&gt;&lt;/th&gt;
  &lt;th width=12%&gt;&lt;font size=3&gt;&lt;strong&gt;Name&lt;/strong&gt;&lt;/font&gt;&lt;/th&gt;
  &lt;th width=12%&gt;&lt;font size=3&gt;&lt;strong&gt;Reference&lt;/strong&gt;&lt;/font&gt;&lt;/th&gt;
  &lt;th width=2%&gt;&lt;font size=3&gt;&lt;strong&gt;Age&lt;/strong&gt;&lt;/font&gt;&lt;/th&gt;
  &lt;th width=12%&gt;&lt;font size=3&gt;&lt;strong&gt;Occupatin&lt;/strong&gt;&lt;/font&gt;&lt;/th&gt;
  &lt;th width=5%&gt;&lt;font size=3&gt;&lt;strong&gt;Mobile No&lt;/strong&gt;&lt;/font&gt;&lt;/th&gt;
  &lt;th width=2%&gt;&lt;font size=3&gt;&lt;strong&gt;Delete&lt;/strong&gt;&lt;/font&gt;&lt;/th&gt;
  &lt;/tr&gt;&lt;/thead&gt;';
  while($row = mysql_fetch_array($result))
  {   
  echo '&lt;tbody&gt;&lt;tr&gt;
  &lt;td width="3%" align="center" &gt;&lt;font size=3&gt;'.$i.'&lt;/font&gt;&lt;/td&gt;
  &lt;td width="10%"&gt;&lt;font size=3&gt;'.$row1['name'].'&lt;/font&gt;&lt;/td&gt;
  &lt;td width="12%" align="left" &gt;&lt;font size=3&gt;
  &lt;a href="edit_detail.phpid='.$row["r_id"].'
  &amp;cand_id='.$_SESSION["id"].'&amp;email='.$row["email"].'"&gt;'.$row['name'].'&lt;/a&gt;&lt;/font&gt;&lt;/td&gt;
  &lt;td width="12%" align="center" &gt;&lt;font size=3&gt;'.$row['reference'].'&lt;/font&gt;&lt;/td&gt;
  &lt;td width="2%" align="right" style="padding-right:8px" &gt;
  &lt;fontsize=3&gt;'.$row['age'].'&lt;/font&gt;&lt;/td&gt;
  &lt;td width="12%" align="right" style="padding-right:8px"&gt;&lt;font 
  size=3&gt;'.$row['occupation'].'&lt;/font&gt;&lt;/td&gt;
  &lt;td width="5%" align="right"&gt;&lt;font size=3&gt;'.$row['mob_no'].'&lt;/font&gt;&lt;/td&gt;
  &lt;td width="2%"&gt;&lt;a href="process_del_client.php?id='.$row['r_id'].'" onClick="return  
  ConfirmSubmit(\'Are You sure ?\')"&gt;&lt;img src = "images/delete.png"&gt;&lt;/a&gt;&lt;/td&gt;
  &lt;/tr&gt;&lt;/tbody&gt;';
  $i++;
  }
  echo '&lt;/table&gt;&lt;/div&gt;&lt;/center&gt;';                 
  ?&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and this is my CSS:</p>
  
  <pre><code>.list {
  height: 409px;
  width: 80%;
  overflow: scroll;
  }
  </code></pre>