How to align these tables in different Divs

Consider the following snap on my site.

The area in red is a table that's being rendered dynamically and is in a separate div. The bottom 3 rows are in a different tables in a different div which is static. As these two are basically different tables, the check boxes don't align themselves. These divs are part of a liquid layout and are in the left hand column. Is there a way to align them without fixing the table, row and column widths? Or maybe fool those two tables to believe that they are actually one and align them?

Here is the structure

<div id='dynamic_in_red_border'>
    <table id="one">
    </table>
</div>
<di开发者_运维百科v id="bottom">
    <table id="static">
    </table>
</div>

Hope my question is clear.

PS: the red box is just to make my point, its not there on the actual UI

You can dynamically insert rows using jQuery or pure JS. I'll do jQuery for now:

HTML:

<table id="foo">
  <tr><td>foo</td></tr>
</table>

JavaScript (with jQuery):

var td = $('<td>').html('bar');
var tr = $('<tr>').append(td);

$('table#foo').append(tr);

I would have thought this should work:

<style>
div.container {display:table;} /* For a container including both tables */
table {display:table-row-group;}

/* Redundant, but just putting here for experimenting */
tbody {display:table-row-group;}
tr {display:table-row;}
td {display:table-cell;}

/* Add some visible borders */
div, td {border: inset black 2px;}
</style>

...but from my tests in Chrome and Firefox, it only works when the file is true XHTML (with XHTML extension or explicit application/xhtml+xml content-type header) or pure XML (.xml extension), and only if there is a single container div.

I haven't tested this but this is what I would try.

You could try wrapping both table container divs in a div (#tables_container), that has position:relative, then give both current divs width 100%. So something in the lines of

#tables_container {position:relative; width: 20%; } 
/* width to be the left column width*/
#dynamic_in_red_border table, 
#bottom table {width: 100%;}

<div id="tables_container">
  <div id='dynamic_in_red_border'>
    <table id="one">
    </table>
  </div>
  <div id="bottom">
    <table id="static">
    </table>
  </div>
</div>

After getting the table-widths to match, you could just give the check-box cells text-align: right. But if you want to align the table cells too, it gets more difficult.