Stciky header and nested tables

Question

I have a nested table layout (legacy code) that implements sticky header using jquery. Currently there are 2 tables, maintable and stickytable(header). The columns doesn't align between the two tables.The code is dynamically generated and hence I can't dictate column width. In addition, both tables have several nested tables which makes it even more complicated. Is there any way I can make a section of the table stick without having 2 separate tables?

<table style="position:relative;" id="maintable" width="1295">
<tr>
  <td colspan="21">
    <div id="stickyheading">
      <table width="1295" id="stickytable">  -- this table has its own layout
       <tr>
             ....... (more <td> elements)
       </tr>
      </table>
    </div>
     ---------- table data (inherits maintable layout and hence columns dont align with stickytable) ----------------
   <tr valign="top">
    <td nowrap  height="15"></td>
    <td nowrap  colspan="3">
      <table width=219>
        <tr> <td>.....
      </table>
    </td>
   </tr>
 </tr>
</table>

This code works but with alignment issues (sticky header works as well).

I moved the div element into the stickytable to group the header content and make it sticky but failed.

<table style="position:relative;" id="maintable" width="1295">
 <tr>
  <td colspan="21">
   <table width="1295" id="stickytable">
    <tr>
     <td colspan="21">
      <div id="stickyheading"> ---------this breaks sticky header functionality
        <tr>
         ....... (more <td> elements)
        </tr>
      </div>
     </td>
    </tr>
   ----- table data goes here ------

</table> -- stickytable ends here 
</tr>
</table>  --main table ends here    

How do I make stickyheader using a single table and div element? For some reason, the div element doesn't work inside stickytable but works under maintable. Am I missing something?

Jfiddle demo