Align Nested Table Headers Using Jquery

I have a standard html table and inside its rows there are nested tables. These nested tables are generated by a plugin and I have no choice but to use this layout. The problem I a

Solution 1:

Would a negative margin be a good enough work around ? DEMO

tabletr:first-of-type table {
    margin:-1.6em00;/* needs to be tuned to numbers of lines + border-spacing */
}

<edit> okay, just seeing answers already given via class + j query </edit>

Solution 2:

Check out this example http://jsfiddle.net/8R4x7/, new class moved with negative margin is being added a very first table with headings , line 7. Don't know if it breaks the rest of your layout

js:

$(".outer-table").find("table:eq(0)").addClass('moved');

css:

.moved {
    margin-top: -25px;
}