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

enter image description here

红色的区域是多数民众赞成被动态呈现的，是在一个单独的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

来源

2011-05-20 Shaunak

你可以动态地将表插入div（反之亦然），这可以很容易。但桌子和格子打得不好...... – Blender 2011-05-20 06:29:46

即使我这样做，他们仍然是两个不同的桌子，不会对齐？顶部的表已经被动态插入。 – Shaunak 2011-05-20 06:32:50

我有几张桌子，它们相互之间很好地对齐（即使它们被内容分开）。 – Blender 2011-05-20 06:34:47

可以动态插入使用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);

来源

2011-05-20 06:49:34 Blender

哎呀，我有这种方法的问题。我现在意识到的是我没有这样做的原因。当呈现不同的内容时，复选框的状态对我很重要。所以如果我使用上面的方法渲染下层表格，我将不得不做相当多的杂耍以保存复选框的状态并相应地渲染下面的行。我仍然在寻找一种可以使用纯html或css来对齐它们的解决方案。 – Shaunak 2011-05-20 07:02:50

从div中删除表格并渲染它们。看看会发生什么， – Blender 2011-05-20 07:05:04

但我需要至少一个div。动态呈现顶部表格。我试图删除较低的股利。它仍然是相同的。 – Shaunak 2011-05-20 07:08:50

我还以为这应该工作：

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

...但从我的测试只有当文件是真实的XHTML（带有XHTML扩展或明确的application/xhtml + xml内容类型头文件）或纯XML（.xml扩展名）时，并且只有存在单个容器div时才适用。

来源

2011-05-20 07:16:02

感谢您的回答。我不是css的专家，并且正在看你第一次提出的建议。你能否解释一下它的意思，以及它是如何为我工作的？或者可能会指出我会解释这一点的一些很好的参考。（我已经为您提供的这种语法使用了Google搜索）。 – Shaunak 2011-05-20 07:23:47

这可能不是您进入的方向（由于可能的浏览器支持问题），但理论上这些CSS属性应该允许您模仿（并且给出其他显示元素的可能性，人们可能会认为它也可以覆盖）表格元素的默认显示行为。请参阅http://www.w3.org/TR/CSS21/tables.html#table-display。例如，div的默认显示是块和跨度为内联，但如果愿意，可以分别将其更改为内联和块。 – 2011-05-20 07:26:38

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

你可以尝试在一个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>

得到表宽度相匹配后，你可以给的复选框细胞的text-align：对。但是如果你想要对齐表格单元格，则会变得更加困难。

来源

2011-05-20 07:41:01 Marcus

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

回答

相关问题