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

Question

我在将表格放置在 html 网格下时遇到问题。请在下面找到我的明确解释:

我有一个如下所示的 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;
}

我有 n 个如上所述的 html 网格。当我单击网格时，它必须显示属于它的表格。如下:

<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 和相同的内容)第一个网格“table”正在覆盖到第二个 html 网格。

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

我希望我的解释很清楚。

请帮帮我。

提前致谢。

-萨西

Answer 1

用 clear: both 包围内容 div 中的所有内容CSS 属性，这应该 使所有东西正确堆叠，或者更确切地说防止东西漂浮在它上面(参见 this link )。

没有 fiddle 很难解决 - 我试图为此组合一个但没有成功，因为我不是 100% 理解你的页面布局并且没有任何我认为你会的 JavaScript使用(或所有 <span> 类的所有 CSS)。

另请务必更正您的语法错误 - 此处缺少右括号:<span class="endTimer"> Test Ended at:11:55:58 </span不知道会不会影响。

希望这对您有所帮助 - 如果可以，请提供 fiddle 演示。