Freeeze few lines and top row for an HTML table - html

Question

I have header line on my page and then I have a table displayed on the page. I want that header line and top row of the table to be freezed and rest the of the table to be scrollable. My table is without <THEAD> element and also I tried using positon:fixed to freeze the header line and top row of table but only top row is fixed. How can I freeze header line as well?
TIA
Code:
<div id="topheader">
<h1> This is header line </h1>
</div>
<table ellspacing="0" cellpadding="10" border="1" width="100%" STYLE="empty-cells:show; position:fixed; top:300px;" id="reporttable" >
<tr class="header">
<td align="left">
Field1
</td>
<td align="left">
Field2
</td>
<td align="left">
Field3
</td>
</tr>
</table>
<table cellspacing="0" cellpadding="10" border="1" width="100%" STYLE="empty-cells:show;" id="reporttables">
<tr class="tbody" >
<td>
Data1
</td>
<td>
Data2
</td>
<td>
Data3
</td>
</tr>
</table>
</div>
CSS:
<style>
div.topheader{
position:fixed;
top:200px;
}
</style>

Answer 1

As far as I know, you cannot do this with just one table element.
A good way to approach this is to create 2 tables and use the table-layout: fixed property on the tables and then set a fixed width on td and th.
Check this Demo or the code snippet below.
div.div-demo {
height: 60px;
overflow-y: scroll;
}
table.demo {
table-layout: fixed;
border: 1px solid black;
}
table.demo td, th {
width: 80px;
text-align: left;
}
<table class="demo">
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</table>
<div class="div-demo">
<table class="demo">
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
</table>
</div>