Fixed header row when rest of the table scrolls?

I have a table with large data. I was able to create scrollbars with overflow:scroll; . But I want to keep header row of the table fixed while rest of the table scrolls. Is there any way to do this in CSS?

Here is my code:

<div id="box">
<table width="100%" height="50%" border="1">
<tr><th>Header 1<th>
<th>Header 2</th></tr>
<tr><td><a href="#" target="_blank">text</a></td>
<td width="100">text</td></tr>
<tr><td><a href="#" target="_blank">text</a></td>
<td width="100">text</td></tr>
</table></div>

Code (markup):

and CSS...

#box{overflow:scroll;
width:100%;
height:10em;}

Code (markup):

plz help...

 

I don't think so!

You could try creating another table for the headings which resides out of the <div id="box"> and remove the <th> from the table where you display the data inside <div>.

Also, try overflow:auto;

So that when you don't have much data, the scroolbars won't be visible.