如何在不同的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：红色框只是为了表达我的意思，它不在实际用户界面上

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);

Answer 2

我原以为这应该有效：

<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>

...但是根据我在Chrome和Firefox中的测试，它仅在文件为真XHTML（带有XHTML扩展或显式应用程序/ xhtml + xml内容类型标头）或纯XML（.xml扩展名）时才有效，并且只有有一个容器div。

Answer 3

我没有测试过这个，但这是我会尝试的。

你可以尝试将两个表容器div包装在一个div（#tables_container）中，它有位置：relative，然后给两个当前div宽度100％。

中的内容

#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>

在获得匹配的表格宽度后，您可以给复选框单元格text-align：right。但是如果你想对齐表格单元格，那就更难了。