Table with Fixed Header

Sometimes we need to display an html table with fixed header,following is the code for a table with fixed header.

This task can be completed with keeping two things in mind.

 1. Div tag with style="height:300px; overflow:auto;”
  This makes division section fixed in page and allow scrollbar to apper.

 2. Making Table header position relative to parent (div) ,
  <tr style="position:relative; top:expression(offsetParent.scrollTop); ">
  
 In this example, I have added 2 elements in table, to see the effect you need to enter more elements that exceeds the div tag height.

 Moreover, we can use style="position:relative; top:expression(offsetParent.scrollTop); " to make header fixed for datagrid also.


 CODE:
<div style="height:300px; overflow:auto; ">
  <table cellspacing="5" width= "952px" style="border-right: black thin solid; border-top: black thin solid; border-left: black thin solid; border-bottom: black thin solid; border-collapse: separate; table-layout: auto; vertical-align: middle; overflow: auto; text-align: center; background-color: navajowhite;" cellpadding="5" frame="box">
  <thead style="background:Brown">
  <tr style="position:relative; top:expression(offsetParent.scrollTop);">
  <th>Station</th>
  <th>Date</th>
  <th>Status</th>
  <th style="width: 161px">Num.</th>
  </tr>
  </thead>
  <tbody>
  <tr>
  <td>KABC</td>
  <td>09/12/2002</td>
  <td>Submitted</td>
  <td>0</td>
  </tr>
  <tr>
  <td>KCBS</td>
  <td>Lockdown</td>
  <td></td>
  <td>2</td>
  </tr> 
  </tbody>
  </table>
</div >