How to make header row of a table (with horizontal and vertical scrollers) fixed ?
- by understack
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.
