How to make header row of a table (with horizontal and vertical scrollers) fixed ?

Question

I've this sample table and I want to make header row of table visible all the time. Header row should scroll with horizontal scrollbar and shouldn't scroll with vertical scrollbar.

table:

<div style="width:800px; height:150px;overflow:scroll;margin:50px auto;">
<table style="width:1600px" border="1">
    <thead style="">
      <tr>
        <th style="width:800px">id_1</th>
        <th style="width:800px">id_2</th>
      </tr>
    </thead>
    <tbody style="">
      <tr><td>1200</td><td>1200</td></tr>
      <tr><td>1200</td><td>1200</td></tr>
      <tr><td>1200</td><td>1200</td></tr>
      <tr><td>1200</td><td>1200</td></tr>
      <tr><td>1200</td><td>1200</td></tr>
      <tr><td>1200</td><td>1200</td></tr>
      <tr><td>1200</td><td>1200</td></tr>
      <tr><td>1200</td><td>1200</td></tr>
    </tbody>
</table>
</div>

How can I do this with css only? Suggestions in this and this thread didn't seem to work, possibly due to presence of scrollbars.

EDIT

I'm looking for a css solution. Table structure and layout can't be changed. Other than this there is no restriction on html.

Answer 1

You can use CSS's position:fixed coupled with some other properties to achieve that.

See this for more information.

Answer 2

Try this, using 2 divs

<div style="width:800px; margin:0 0 0 0;">
<table  width="800" border="1" cellpadding="3">
    <thead style="">
      <tr>
        <th style="width:400px">id_11</th>
        <th style="width:400px">id_2</th>
      </tr>
    </thead>
</table>
</div>
<div style="width:820px; height:150px;overflow:scroll;margin:0 0 0 0; overflow-x: hidden;">
<table  width="800" border="1" cellpadding="3">
    <tbody style="">
      <tr><td style="width:400px">1200</td><td style="width:400px">1200</td></tr>
      <tr><td>1200</td><td>1200</td></tr>
      <tr><td>1200</td><td>1200</td></tr>
      <tr><td>1200</td><td>1200</td></tr>
      <tr><td>1200</td><td>1200</td></tr>
      <tr><td>1200</td><td>1200</td></tr>
      <tr><td>1200</td><td>1200</td></tr>
      <tr><td>1200</td><td>1200</td></tr>
    </tbody>
</table>
</div>