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.