事業部寬度與總錶行

Question

我想的都/風格駐留在最後一個表格單元格，並在表列中顯示的記錄的詳細信息的DIV

結構看起來像

<tr> 
<td>Saturday 21.11.2015 </td> 
<td>Frankfurt </td> 
<td>London </td> 
<td> <a href="#">**+ show details**</a> 
    <div class="toggle-details">....</div> 
</td> 
</tr> 

現在我需要的是，如果用戶點擊鏈接，類名稱爲toggle-details的div應該被切換，並且它應該與整個表格行一樣寬。不是單元格

Answer 1

這是一種做法。

套裝position: relative你的父表，然後使用上隱藏div，你會切換顯示/隱藏 position: absolute。

.panel塊元素將佔用表格（行）的寬度，您可以根據需要調整偏移量以將其放置。

訣竅是隻設置左右偏移量。如果您省略了top偏移量，則它將默認爲元素的位置，如果它沒有絕對定位。如果這是您需要的，這可以讓您獲得隱藏面板的交錯定位。

或者，如果您設置了top偏移量，則所有面板都將位於相同的位置，並且它們會相互重疊。

您也可以嘗試在tr元素上設置position: relative，但這在Chrome中會中斷（但適用於Firefox和IE）。

table { 
 
    border: 1px dotted blue; 
 
    position: relative; 
 
} 
 
.panel { 
 
    position: absolute; 
 
    left: 25%; /* adjust as needed */ 
 
    right: -25%; /* use -value of left to keep full row width */ 
 
    border: 1px solid red; 
 
    background-color: white; 
 
    margin-top: -0.5em; 
 
}

<table> 
 
    <tr> 
 
    <td>First Cell is Long</td> 
 
    <td> 
 
     <a>Show Div Link</a> 
 
     <div class="panel">(1) Hidden div/panel to be toggled. and text 
 
     no longer than the parent table.</div> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td>First Cell is Long</td> 
 
    <td> 
 
     <a>Show Div Link</a> 
 
     <div class="panel">(2) Hidden div/panel to be toggled. and text 
 
     no longer than the parent table.</div> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td>First Cell is Long</td> 
 
    <td> 
 
     <a>Show Div Link</a> 
 
     <div class="panel">(3) Hidden div/panel to be toggled. and text 
 
     no longer than the parent table.</div> 
 
    </td> 
 
    </tr> 
 
</table>

Answer 2

您正在尋找這樣的：相對於tr元素

寫入位置，通過這種模式，你可以在位置絕對股利：

tr { 
    position: relative; 
} 
.toggle-details { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
} 

看到它的工作：

http://jsfiddle.net/6epnonge/