Html 如何在不同的div中对齐这些表

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

红色区域是一个动态呈现的表，位于一个单独的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上

您可以使用jQuery或纯JS动态插入行。现在我将执行jQuery：

HTML：

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

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

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

福

JavaScript（带jQuery）：

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

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

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

var td=$（''）.html（'bar'）；
var tr=$（''）.append（td）；
$（'table#foo'）。追加（tr）；

您可以使用jQuery或纯JS动态插入行。现在我将执行jQuery：

HTML：

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

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

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

福

JavaScript（带jQuery）：

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

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

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

var td=$（''）.html（'bar'）；
var tr=$（''）.append（td）；
$（'table#foo'）。追加（tr）；

我本以为这应该行得通：

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

div.container{display:table；}/*用于包含两个表的容器*/
表{显示：表行组；}
/*多余的，但只是放在这里做实验*/
tbody{display:表行组；}
tr{显示：表行；}
td{display:表格单元格；}
/*添加一些可见的边框*/
div，td{边框：插入黑色2px；}

---

…但从我在Chrome和Firefox中的测试来看，只有当文件是真正的XHTML（带有XHTML扩展名或显式应用程序/XHTML+xml内容类型头）或纯xml（.xml扩展名），并且只有当有一个容器div时，它才起作用。

我认为这应该起作用：

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

div.container{display:table；}/*用于包含两个表的容器*/
表{显示：表行组；}
/*多余的，但只是放在这里做实验*/
tbody{display:表行组；}
tr{显示：表行；}
td{display:表格单元格；}
/*添加一些可见的边框*/
div，td{边框：插入黑色2px；}

---

…但从我在Chrome和Firefox中的测试来看，只有当文件是真正的XHTML（带有XHTML扩展名或显式应用程序/XHTML+xml内容类型头）或纯xml（.xml扩展名），并且只有在只有一个容器div的情况下，它才起作用。

我还没有测试过，但我会尝试这样做

您可以尝试将两个表容器div包装在一个div（#tables_container）中，该div具有position: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>

#表格#容器{位置：相对；宽度：20%；}
/*宽度为左栏宽度*/
#动态\u在\u红色\u边框表中，
#下表{宽度：100%；}

---

在获得匹配的表格宽度后，您可以只给复选框单元格文本align:right。但是，如果您也想对齐表格单元格，则会变得更加困难。

我还没有测试过这一点，但我会尝试这样做

您可以尝试将两个表容器div包装在一个div（#tables_container）中，该div具有position: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>

#表格#容器{位置：相对；宽度：20%；}
/*宽度为左栏宽度*/
#动态\u在\u红色\u边框表中，
#下表{宽度：100%；}

---

---

在获得匹配的表格宽度后，您可以只给复选框单元格文本align:right。但是，如果您也希望对齐表格单元格，则会变得更加困难。

您可以动态地将表格插入div（反之亦然）中，这将使操作变得简单。但是桌上和桌上的球打得不好…即使我这样做了，他们仍然是两个不同的桌上，不会正确对齐？顶部的表已经被动态插入。我有几个表彼此对齐（尽管它们是按内容分开的）。这是两个独立的表。我只是将结构放在问题中，以使其更清晰。如果不需要边框，您可以动态插入行……您可以动态地将表插入div中（反之更好），这将使它更容易。但是桌上和桌上的球打得不好…即使我这样做了，他们仍然是两个不同的桌上，不会正确对齐？顶部的表已经被动态插入。我有几个表彼此对齐（尽管它们是按内容分开的）。这是两个独立的表。我只是将结构放在问题中，以使其更清晰。如果不需要边界，您可以动态插入行……哎呀，我对这种方法有一个问题。我现在意识到这就是我没有走这条路的原因。当呈现不同的内容时，复选框的状态对我很重要。因此，如果我使用上述方法渲染较低的表，我将不得不做相当多的杂耍来保存复选框的状态，并相应地渲染较低的行。我仍然在寻找一个解决方案，它可以使用简单的html或css来对齐它们。从div中删除表，然后只渲染它们。看看会发生什么，但我至少需要一个div.来动态呈现顶部表。我试着删除下一个分区。它仍然是一样的。我在布局中使用了的部分CSS/HTML（特别是目录）。ToC不是一张桌子，这就是为什么它对我如此有效的原因。啊，看起来很棒！所以对我来说，一个解决方案是根本不使用表格，并尝试在没有表格的情况下获得正确的对齐？每行有三个元素：图例图像、链接和复选框。您如何在不使用表格的情况下对齐三件事？对不起，我不是css设计方面的专家。哦，我有一个问题