html - 如何在不同的 Div 中对齐这些表格

Question

考虑我网站上的以下快照。

红色区域是动态呈现的表格，位于单独的 div 中。底部 3 行位于不同表中的不同 div 中，该表是静态的。由于这两个基本上是不同的表，因此复选框不会自行对齐。这些 div 是液体布局的一部分，位于左侧列中。有没有办法在不固定表格、行和列宽度的情况下对齐它们？或者愚弄这两个表，让它们相信它们实际上是一个表并将它们对齐？

结构如下

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

希望我的问题很清楚。

PS:红框只是为了表达我的意思，实际UI上没有

Answer 1

您可以使用 jQuery 或纯 JS 动态插入行。我现在会使用 jQuery:

HTML:

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

JavaScript(使用 jQuery):

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

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