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

Question

我正在尝试制作一个 table，其中包含当您滚动某个术语时出现的下拉信息选项卡。我最初的方法是让这些信息选项卡不显示 display : none css 规则，然后当用户将鼠标悬停在相应的文本上时，通过将显示属性更改为 display: block.

来显示信息选项卡

我的问题是我不知道如何覆盖 containing/parent 元素的默认行为，并且 table 调整大小以适应新出现的元素，然后调整回正常大小当用户滚动离开时。我尝试了 z-index（将 td 设置为 z-index:1 并将信息选项卡设置为 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

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

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

html 是 table 一行的简单示例。 css 默认隐藏包含的 child div，并且在悬停时设置显示为块，除了默认样式和上面提到的 positioning/z-index

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 查看完整示例

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

Prevent td Element From Growing to Fit Child Elements

html

css

html-table

dropdown