Static Table Header and scrolling lines ?

I must find a way to display static table header and scrolling detail
lines beneath it. On the Net there are numerous examples for sticky
menus and objects - but all my efforts to have <THEAD></THEAD> as
sticky object have failed.

I try the following steps as client side JavaScript that works only if
a separate table is within a <div id='divHeader'> ... </div>
1.
<div id="divHeader">
 <table><!-This table is then sticky on top -->
  <tr><td></td>
  </tr>
 </table>
</div>

2. Onload event handler gets Object oTblHdr by name:
oTblHdr = document.all['byName'];

3. Onscroll event handler then makes sure this header oTblHdr is always
on top of the page

THE PROBLEM is that now I have two tables, and because the second is
very unpredictable as numbers of columns and size of cells, I CAN'T
make sure their columns align - even approximately well ...

4. It is critical that I have only one table like this - the STYLE
attribute is supposed to do the magic - according to what MSDN
describes for "display:table-header-group;"
<table>
<THEAD STYLE="display:table-header-group;">
<tr><td></td></tr>
</THEAD>
<TBODY>
  <tr><td></td> </tr>
...
  <tr><td></td> </tr>
  </TBODY>
 </table>

Anybody to have idea how this is done?