Table scroll with HTML and CSS
Table with Fixed Header
<table cellspacing="0" cellpadding="0" border="0" width="325">
<tr>
<td>
<table cellspacing="0" cellpadding="1" border="1" width="300" >
<tr style="color:white;background-color:grey">
<th>Header 1</th>
<th>Header 2</th>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<div style="width:320px; height:80px; overflow:auto;">
<table cellspacing="0" cellpadding="1" border="1" width="300" >
<tr>
<td>new item</td>
<td>new item</td>
</tr>
<tr>
<td>new item</td>
<td>new item</td>
</tr>
<tr>
<td>new item</td>
<td>new item</td>
</tr>
<tr>
<td>new item</td>
<td>new item</td>
</tr>
<tr>
<td>new item</td>
<td>new item</td>
</tr>
<tr>
<td>new item</td>
<td>new item</td>
</tr>
<tr>
<td>new item</td>
<td>new item</td>
</tr>
<tr>
<td>new item</td>
<td>new item</td>
</tr>
<tr>
<td>new item</td>
<td>new item</td>
</tr>
<tr>
<td>new item</td>
<td>new item</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
Result
This is working in all browser
Demo jsfiddle http://jsfiddle.net/nyCKE/6302/
Late answer, another idea, but very short.
- put the contents of header cells into div
- fix the header contents, see CSS
table { margin-top: 20px; display: inline-block; overflow: auto; }
th div { margin-top: -20px; position: absolute; }
Note that it is possible to display table as inline-block due to anonymous table objects:
"missing" [in HTML table tree structure] elements must be assumed in order for the table model to work. Any table element will automatically generate necessary anonymous table objects around itself.
/* scrolltable rules */
table { margin-top: 20px; display: inline-block; overflow: auto; }
th div { margin-top: -20px; position: absolute; }
/* design */
table { border-collapse: collapse; }
tr:nth-child(even) { background: #EEE; }
<table style="height: 150px">
<tr> <th><div>first</div> <th><div>second</div>
<tr> <td>foo <td>bar
<tr> <td>foo foo foo foo foo <td>bar
<tr> <td>foo <td>bar
<tr> <td>foo <td>bar bar bar
<tr> <td>foo <td>bar
<tr> <td>foo <td>bar
<tr> <td>foo <td>bar
<tr> <td>foo <td>bar
<tr> <td>foo <td>bar
<tr> <td>foo <td>bar
<tr> <td>foo <td>bar
<tr> <td>foo <td>bar
<tr> <td>foo <td>bar
<tr> <td>foo <td>bar
</table>
As of 2016
The proper way to achieve this is position: sticky - see the demo in the link.