如何使用css属性动态定位html表格？

Question

我有一个问题，定位我的表下的网格。请找我清楚的解释如下：

我有一个HTML格如下，和它的CSS属性：

<div class="teststatus"> 
<span class="description"> com.online.Regression</span> 
<span class="startTimer"> Test Started at:11:55:45</span> 
<span class="endTimer"> Test Ended at:11:55:58 </span 
<span class="status"><b> Status:</b> FAILED</span> 
</div> 

CSS属性：

#main{    //It's id which is common for all the html grid tag 
width:1500px; 
position:relative; 
background-color:#eeeff4; 
left:40px; 
} 

.teststatus 
{ 
position:absolute; 
top:500px; 
width:1500px; 
background-color:#eeeff4; 
} 

我有HTML格数n如上。当我点击网格时，它必须显示属于它的表格。如下：

<div class="assertiondatTable"> 
<table class="assertionTable"> 
<tbody> 
<tr> 
<th>TC_ID</th> 
<th>Description</th> 
<th>Expected Result</th> 
<th>Actual Result</th> 
<th> Status </th> 
</tr> 
<tr> 
<td> TC_DirectDebit_001</td> 
<td> Check the direct debit functionality </td> 
<td> The record should be inserted successfully</td> 
<td> The record is inserted successfully</td> 
<td> PASSED</td> 
</tbody> 
</table> 
</div> 

为表CSS属性：

.assertionTable 
{ 
outline:1px solid green; 
left: 300px; 
position:absolute; 
width:900px; 

} 

每个HTML格具有一个#ID属性，是主要为网格，表中。表格总是属于网格。你可以假设一个＃是祖先，网格是孩子，而桌子是这个设计的大孩子。

所以，我没有面对这个设计（单记录）的任何问题，它的作品完美。但是当我添加另一个网格（与上面的代码相同，并且第二个网格具有＃TC2和相同的内容）时，第一个网格“表”中的问题被覆盖到第二个html网格中。

有人可以帮我解决这个问题吗？我想动态地放置在网格下的表格。表格最多有20条记录如果有人点击了网格，那么它必须显示和隐藏表格（已完成）。我的问题在这里定位在页面上。如果表格隐藏，我只想保持距每个网格10 px的距离。如果打开它，那么我需要动态获取空间来查看整个表格而不覆盖其他网格/表格。

我希望我的解释清楚。

请帮我一把。

在此先感谢。

-Sasi

Answer 1

环绕一切与clear: both CSS属性内容DIV，这应该使一切正确堆栈，或者更确切地说，防止东西漂浮在它（见this link）。

这是很难解决没有小提琴 - 我试图把它放在一起，但没有成功，因为我不是100％理解你的页面布局，也没有任何JavaScript，我认为你'重新使用（或所有<span>类的CSS）。

此外，请务必纠正您的语法错误 - 在这里丢失右括号：<span class="endTimer"> Test Ended at:11:55:58 </span我不知道这是否会影响它。

希望这有助于 - 请提供一个小提琴演示，如果可以的话。