防止 td 元素增长以适应子元素

Question

我正在尝试创建一个带有下拉信息选项卡的表格，当您滚动一个术语时会出现这些选项卡。 我最初的方法是使用display : none css 规则使这些信息选项卡不显示，然后 当用户将鼠标悬停在相应的文本上时，通过将显示属性更改为 display: block 来显示信息选项卡。

我的问题是我无法弄清楚如何覆盖包含/父元素的默认行为，并且表格调整大小以适应新出现的元素，然后在用户滚动离开时将大小调整回正常。我尝试了 z-index（将 td 设置为 z-index: 1 并将 info 选项卡设置为 z-index:2）以及 visibility:hidden -> visibility:visible 与 display:none -> display:block，但其中任何一个都没有运气。我还尝试将 td 元素的最大高度设置为 200px，但无论如何它似乎都超过了。

这是我目前所拥有的源代码：

/* In an attempt to prevent row from expanding automatically */

td {
  max-height: 100px;
}

.card-body {
  display: none;
  border: 2px solid black;
  height: 300px;
  width: 400px;
  z-index: 2;
}

.card-trigger:hover+.card-body {
  display: inline-block;
  position: relative;
  top: 0px;
  right: 15px;
}

.card-body:hover {
  display: block;
}

.card-body .game-info {
  display: none;
}

.card-body .dd-trigger:hover+.game-info {
  display: block;
}

<h3>Ratings by som bol</h3>
<p>sort by release date (asc/desc), rating amout, game category, game creator, game console</p>
<input type="text" placeholder="filter by game title, categories, creators, consoles, console makers">
<div>Search hints</div>
<table class="table">
  <thead>
    <tr>
      <th>Game title</th>
      <th>your rating</th>
      <th>Average rating</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <!-- Row 1 -->
    <tr>
      <td>
        <a class="card-trigger" href="#">Some Videogame</a>
        <div class="card-body">

          <img src="#" alt="picture of the game in question" />
          <h3><a [routerLink]="">Game title</a></h3>
          <p>Some stuff happens and you have fun</p>
          <span class="dd-trigger">Show more info</span>
          <ul class="game-info">
            <li>Average Rating: </li>
            <li>Average Review Score: </li>
          </ul>
        </div>
      </td>

      <td>
        your rating : 2
      </td>
      <td>
        average rating : 3
      </td>
      <td><button>Delete rating</button></td>
    </tr>
    <!-- Row 2 -->
    <tr>
      <td>
        <a class="card-trigger" href="#">Some Videogame</a>
        <div class="card-body">

          <img src="#" alt="picture of the game in question" />
          <h3><a [routerLink]="">Game title</a></h3>
          <p>Some stuff happens and you have fun</p>
          <span class="dd-trigger">Show more info</span>
          <ul class="game-info">
            <li>Average Rating: </li>
            <li>Average Review Score: </li>
          </ul>
        </div>
      </td>

      <td>
        your rating : 2
      </td>
      <td>
        average rating : 3
      </td>
      <td><button>Delete rating</button></td>
    </tr>
    <!-- row 3 -->
    <tr>
      <td>
        <a class="card-trigger" href="#">Some Videogame</a>
        <div class="card-body">

          <img src="#" alt="picture of the game in question" />
          <h3><a [routerLink]="">Game title</a></h3>
          <p>Some stuff happens and you have fun</p>
          <span class="dd-trigger">Show more info</span>
          <ul class="game-info">
            <li>Average Rating: </li>
            <li>Average Review Score: </li>
          </ul>
        </div>
      </td>

      <td>
        your rating : 2
      </td>
      <td>
        average rating : 3
      </td>
      <td><button>Delete rating</button></td>
    </tr>
  </tbody>
</table>

Answer 1

为了防止父母调整大小以适应包含的元素，您必须做三件事：

1. 将父位置设置为相对
2. 将子位置设置为绝对位置（并使用上、下、左、右定位在适当的位置）
3. 将子元素的 z-index 设置为高于父元素的 z-index。我们这样做是为了防止任何父样式与子样式重叠。它实质上使子元素看起来像是位于父元素之上。

html 是一个单行表的简单示例。除了上面提到的默认样式和定位/z-index之外，css默认隐藏包含的子div，并设置悬停时显示为阻塞

table, th, td {
  border: 1px solid black;
}

.pop-up {
  display: none
}

td {
  position: relative;
}

td:hover > .pop-up {
  display: block;
}

.pop-up {
  width: 500px;
  height: 100px;
  background: red;
  border: 1px solid black;
  position: absolute;
  left: 50px;
  z-index: 1;  
}

click here 查看完整示例