Hello All,

I'm using a dynamic table which contains drop down, text box. Drop down in a dynamic table when scrolled down goes above the header. How to avoid it ?

Code:
<div id="scroll-Table">
  <table border="1" rules="none" frame="box">
    <thead>
     <tr>
<th>Column 1</th>
<th>Column 2</th>
    </tr>
    </thead>
    <tbody>
     <tr>
<td>
  <select size="1" id="name">
   <option>option 1</option>
           <option>option 2</option>
  </select> </td>
        <td>
  <input type="text" id="num" maxlength="6"/>
        </td>
    </tr> 
    <tr>
<td>
  Henry
        </td>
        <td>
  12
        </td>
    </tr>
<tr>
<td>
  Henry
        </td>
        <td>
  12
        </td>
    </tr>
<tr>
<td>
  Henry
        </td>
        <td>
  12
        </td>
    </tr>
   </tbody>
</table>

CSS
#scroll-Table {
width: 150%;
margin:0 auto;
margin-left: 0%;
overflow:auto;
height:300px;
}
#scroll-Table table {
width: 100%;
}
#scroll-Table table tbody {
overflow:auto;
}
#scroll-Table thead tr {
position:relative;
top:expression(this.parentElement.parentElement.parentElement.scrollTop-2);
}
#scroll-Table tfoot tr {
position:relative;
bottom:expression(this.parentElement.parentElement.offsetHeight - this.parentElement.parentElement.parentElement.clientHeight - this.parentElement.parentElement.parentElement.scrollTop);
}

Thanks...