如何使 div 相对于 table header (th) 但在它之外？

Question

我有一个 table header，点击它会显示帮助文本 (div)。

但是帮助 div 总是使 table header 比其他 header 大。

代码片段如下：

#help_box {
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.77);
  padding: 10px;
  color: white;
  font-size: 12px;
}

<body>
  <!--The content of the site-->
  <div id="contentv2">

    <div id="highlight">
      <table>
        <tbody>
          <tr>
            <th valign="center" style="min-width: 130px;">Stock</th>
            <th valign="center" style="min-width: 70px;">Price</th>
            <th valign="center" style="min-width: 70px;">Variation<div id="help_box" align="justify">The period os ocilation is a random text. To make % of it is is the same size and the last week (until Sunday 23:59).</div></th>
          </tr>
        </tbody>
        <tbody>
          <tr><td style="font-size: 16.66px;">The first row</td><td style="font-size: 16.66px;">.50</td><td align="right" style="font-size: 16.66px;color:red">-0.66%</td></tr>
          <tr><td style="font-size: 16.66px;">The second row</td><td style="font-size: 16.66px;">.50</td><td align="right" style="font-size: 16.66px;color:red">-0.66%</td></tr>
          <tr><td style="font-size: 16.66px;">The third row</td><td style="font-size: 16.66px;">.50</td><td align="right" style="font-size: 16.66px;color:red">-0.66%</td></tr>
        </tbody>
      </table>
    </div>
  </div>

我需要它是什么：

帮助框应位于 header 的正下方并与下面的行重叠，但不应与 table header.[=15= 的大小相混淆]

Answer 1

如果我理解正确，你应该将 position: absolute 应用到你的 #help_box div。然后你可以用 left, right, top, bottom 属性定位它。

如果您希望相对于 table 而不是整个页面应用定位，则必须将 position: relative 属性应用到 table.

Answer 2

如果我理解您的要求，以下内容应该可以满足您的需求（尽管菜单的大小会垂直增长，因此您需要确保根据 header)

#help_box {
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.77);
  padding: 10px;
  color: white;
  position: absolute;
  font-size: 12px;
}

<body>
  <!--The content of the site-->
  <div id="contentv2">

    <div id="highlight">
      <table>
        <tbody>
          <tr>
            <th valign="center" style="min-width: 130px;">Stock</th>
            <th valign="center" style="min-width: 70px;">Price</th>
            <th valign="center" style="min-width: 70px; position: relative">Variation<div id="help_box" align="justify">The period os ocilation is a random text. To make % of it is is the same size and the last week (until Sunday 23:59).</div></th>
          </tr>
        </tbody>
        <tbody>
          <tr><td style="font-size: 16.66px;">The first row</td><td style="font-size: 16.66px;">.50</td><td align="right" style="font-size: 16.66px;color:red">-0.66%</td></tr>
          <tr><td style="font-size: 16.66px;">The second row</td><td style="font-size: 16.66px;">.50</td><td align="right" style="font-size: 16.66px;color:red">-0.66%</td></tr>
          <tr><td style="font-size: 16.66px;">The third row</td><td style="font-size: 16.66px;">.50</td><td align="right" style="font-size: 16.66px;color:red">-0.66%</td></tr>
        </tbody>
      </table>
    </div>
  </div>

Answer 3

谢谢！有效！ Fiddle 下面：

#help_box {
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.77);
  padding: 10px;
  color: white;
  font-size: 12px;
  position: absolute;
  left: 80px;
  right: 80px;
}

<body>
  <!--The content of the site-->
  <div id="contentv2" style="position: relative">

    <div id="highlight">
      <table>
        <tbody>
          <tr>
            <th valign="center" style="min-width: 130px;">Stock</th>
            <th valign="center" style="min-width: 70px;">Price</th>
            <th valign="center" style="min-width: 70px;">Variation
              <div id="help_box" align="justify">The period os ocilation is a random text. To make % of it is is the same size and the last week (until Sunday 23:59).</div>
            </th>
          </tr>
        </tbody>
        <tbody>
          <tr>
            <td style="font-size: 16.66px;">The first row</td>
            <td style="font-size: 16.66px;">.50</td>
            <td align="right" style="font-size: 16.66px;color:red">-0.66%</td>
          </tr>
          <tr>
            <td style="font-size: 16.66px;">The second row</td>
            <td style="font-size: 16.66px;">.50</td>
            <td align="right" style="font-size: 16.66px;color:red">-0.66%</td>
          </tr>
          <tr>
            <td style="font-size: 16.66px;">The third row</td>
            <td style="font-size: 16.66px;">.50</td>
            <td align="right" style="font-size: 16.66px;color:red">-0.66%</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

如何使 div 相对于 table header (th) 但在它之外？

How do I make a div relative to a table header (th) but outside of it?

html

css

html-table

orientation