Question

I have a simple div tag:
I need to make the thead fixed and above the tbody.
I need to have them within the same div, same table.
With the below code, my header is over the body. How Can I push the tbody down a few notches, so when i scroll the header is fixed and only the body moves

<div STYLE=" height: 120px; width: 100px; font-size: 12px; overflow: auto;">
  <table bgcolor="green">
    <thead style="position:fixed;">
        <tr><td bgcolor="#fafafa">hello</td></tr>
    </thead>
    <tbody >
   <tr><td bgcolor="#dadada">www.hioxindia.com</td></tr>
   <tr><td >maths.hscripts.com</td></tr>
   <tr><td bgcolor="#dadada">www.hscripts.com</td></tr>
   <tr><td>free php scripts</td></tr>
   <tr><td bgcolor="#dadada">www.hiox4u.com</td></tr>
   </tbody>
</table>
</div>

Has to work on IE
For the above div… I need to add scroll with fixed header on top of the table. No additional divs or table should be included inbetween. I need the thead and tbody to be within the same table

Answer 1

Using your code as a basis, here is a jsfiddle I’ve tested in Chrome and IE10 and it works there at least.

JSFiddle:
http://jsfiddle.net/YbQzF/

code:

<div STYLE=" height: 120px; width: 100px; font-size: 12px; overflow: auto;">
  <table bgcolor="green">
    <thead style="position: fixed">
        <tr><td bgcolor="#fafafa">hello</td></tr>
    </thead>
    <tbody style="overflow:scroll; max-height:100px; position:absolute; top:20px;">
   <tr><td bgcolor="#dadada">www.hioxindia.com</td></tr>
   <tr><td >maths.hscripts.com</td></tr>
   <tr><td bgcolor="#dadada">www.hscripts.com</td></tr>
   <tr><td>free php scripts</td></tr>
   <tr><td bgcolor="#dadada">www.hiox4u.com</td></tr>
   <tr><td>free php scripts</td></tr>
   <tr><td bgcolor="#dadada">www.hiox4u.com</td></tr>
   <tr><td>free php scripts</td></tr>
   <tr><td bgcolor="#dadada">www.hiox4u.com</td></tr>
...
   </tbody>
</table>
</div>​