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，然后使用隐藏position: absolute上的div，您将切换显示/隐藏。

.panel块元素将采用表格的宽度（行），您可以调整偏移量以根据需要定位它。

诀窍是仅设置左右偏移。如果省略top偏移量，它将默认为元素的位置（如果它没有绝对定位）。这可以让你获得错开的定位隐藏面板，如果这是你需要的。

或者，如果您设置top偏移量，则所有面板将位于相同的位置，并且它们将相互重叠。

您还可以尝试在position: relative元素上设置tr，但这会在Chrome中中断（但在Firefox和IE中有效）。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 2

您正在搜索：

为tr元素写相对位置，通过这种模式，你可以使div处于绝对位置：

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

看到它正常工作：

http://jsfiddle.net/6epnonge/

Div宽度到总表行

2 个答案: