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属性，它是网格和表格的主要属性。该表始终属于网格。你可以假设＃是祖先，grid是child，table是这个设计的大孩子。

所以，到目前为止，我没有遇到任何与此设计有关的问题（单一记录），并且它完美无缺。但是当我添加另一个网格（与上面的代码相同，第二个网格有＃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我不知道这是否会影响它。

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

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

1 个答案: