如何使用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我不知道這是否會影響它。

希望這有助於 - 請提供一個小提琴演示，如果可以的話。