html - keep table headers still when scrolling a table? -

i have following table inside model dialog , have applied css to, head stays in same position when being scrolled.

however after load page columns pushed left, these 5 columns should appear under headers.

also underlying page has been pushed left of page also.

               <style>                     .tblsearchmedia1 tbody {                     height: 100px;                     overflow: auto;                         }                     .tblsearchmedia1 td {                     padding: 3px 10px;                     }                      .tblsearchmedia1 thead > tr, tbody{                     display:block;                      }                 </style>                   <table class="tblsearchmedia1">                 <thead>                     <tr>                         <th> region </th>                         <th> subregion </th>                         <th> country </th>                         <th> media type </th>                         <th> media name </th>                     </tr>                 </thead>                 <tbody data-bind="foreach: mediagroups">                     <tr>                         <td data-bind="text: id"></td>                         <td data-bind="text: id"></td>                         <td data-bind="text:id"></td>                         <td data-bind="text: id"></td>                         <td data-bind="text: id"></td>                     </tr>                 </tbody>             </table> 

link larger image

check if solves problem: http://jsfiddle.net/javitube/dljln/1/

    .tblsearchmedia1     {         width:500px;     }     .tblsearchmedia1 tbody {         height: 50px;         overflow:auto;         display:block;         width:100%;     }      .tblsearchmedia1 thead th, .tblsearchmedia1 tbody td     {         width: 100px;     }     .tblsearchmedia1 td {         padding: 3px 10px;     }     .tblsearchmedia1 thead > tr {         position:relative;         display:block;     }