Question

我有一个引导表，我需要表主体进行垂直滚动。

表中还有一些td元素，我想在鼠标悬停时进行扩展，并使整个表溢出。

.element:hover {
  background-size: 100% 100%;
  transform: scale(6, 6);
  transform-origin: center;
  transition: all 0.5s ease-in-out;
  z-index: 999;
}

一切正常，直到我设置

tbody { display: block }

据我所知，这是使tbody滚动的唯一方法。但是，当添加此元素时，td元素将不会在悬停时溢出表，而是会隐藏在thead后面。

我试图通过添加相对和绝对位置来解决它，但是似乎没有什么区别……我还尝试将thead上的z-index更改为-1，但这没有也解决不了。

如果运行下面的代码段，并将鼠标悬停在带有绿色背景的td项上，这就是我想要的行为。您会看到它悬停了整个表。但是此版本的tbody中没有滚动。

tbody {
  height: 200px;
  /*   display: block; */
  overflow-y: scroll;
  overflow-x: hidden;
}

.element {
  background-color: green;
}

.element:hover {
  background-size: 100% 100%;
  transform: scale(6, 6);
  transform-origin: center;
  transition: all 0.5s ease-in-out;
  z-index: 999;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="card col-8 offset-2 p-0 mt-5">
  <div class="card-body p-0">
    <table class="table table-striped">
      <thead class="thead-dark">
        <tr class="row m-0">
          <th class="col-3" scope="col">#</th>
          <th class="col-3" scope="col">First</th>
          <th class="col-3" scope="col">Second</th>
          <th class="col-3" scope="col">Third</th>
        </tr>
      </thead>
      <tbody>
        <tr class="row m-0">
          <th class="col-3" scope="row">1</th>
          <td class="col-3">Blah</td>
          <td class="col-3 element">Blah</td>
          <td class="col-3">Blah</td>
        </tr>
        <tr class="row m-0">
          <th class="col-3" scope="row">2</th>
          <td class="col-3">Blah</td>
          <td class="col-3">Blah</td>
          <td class="col-3">Blah</td>
        </tr>
        <tr class="row m-0">
          <th class="col-3" scope="row">3</th>
          <td class="col-3">Blah</td>
          <td class="col-3">Blah</td>
          <td class="col-3">Blah</td>
        </tr>
        <tr class="row m-0">
          <th class="col-3" scope="row">4</th>
          <td class="col-3">Blah</td>
          <td class="col-3">Blah</td>
          <td class="col-3">Blah</td>
        </tr>
        <tr class="row m-0">
          <th class="col-3" scope="row">5</th>
          <td class="col-3">Blah</td>
          <td class="col-3">Blah</td>
          <td class="col-3">Blah</td>
        </tr>
        <tr class="row m-0">
          <th class="col-3" scope="row">6</th>
          <td class="col-3">Blah</td>
          <td class="col-3">Blah</td>
          <td class="col-3">Blah</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

但是现在，如果在启用tbody滚动的情况下运行此下一个代码段，则可以看到，将鼠标悬停在绿色的td项上时，该项现在隐藏在thead的后面。 / p>

tbody {
  height: 200px;
  display: block;
  overflow-y: scroll;
  overflow-x: hidden;
}

.element {
  background-color: green;
}

.element:hover {
  background-size: 100% 100%;
  transform: scale(6, 6);
  transform-origin: center;
  transition: all 0.5s ease-in-out;
  z-index: 999;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card col-8 offset-2 p-0 mt-5">
  <div class="card-body p-0">
    <table class="table table-striped">
      <thead class="thead-dark">
        <tr class="row m-0">
          <th class="col-3" scope="col">#</th>
          <th class="col-3" scope="col">First</th>
          <th class="col-3" scope="col">Second</th>
          <th class="col-3" scope="col">Third</th>
        </tr>
      </thead>
      <tbody>
        <tr class="row m-0">
          <th class="col-3" scope="row">1</th>
          <td class="col-3">Blah</td>
          <td class="col-3 element">Blah</td>
          <td class="col-3">Blah</td>
        </tr>
        <tr class="row m-0">
          <th class="col-3" scope="row">2</th>
          <td class="col-3">Blah</td>
          <td class="col-3">Blah</td>
          <td class="col-3">Blah</td>
        </tr>
        <tr class="row m-0">
          <th class="col-3" scope="row">3</th>
          <td class="col-3">Blah</td>
          <td class="col-3">Blah</td>
          <td class="col-3">Blah</td>
        </tr>
        <tr class="row m-0">
          <th class="col-3" scope="row">4</th>
          <td class="col-3">Blah</td>
          <td class="col-3">Blah</td>
          <td class="col-3">Blah</td>
        </tr>
        <tr class="row m-0">
          <th class="col-3" scope="row">5</th>
          <td class="col-3">Blah</td>
          <td class="col-3">Blah</td>
          <td class="col-3">Blah</td>
        </tr>
        <tr class="row m-0">
          <th class="col-3" scope="row">6</th>
          <td class="col-3">Blah</td>
          <td class="col-3">Blah</td>
          <td class="col-3">Blah</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

td元素最终将成为图像，这就是为什么我不希望它在thead之后被切断。

如何获得所需的行为，并允许元素溢出整个表，同时在tbody上进行垂直滚动？

Answer 1

您可以使用css transform-origin 属性来满足该特定要求。

.element:hover {
    background-size: 100% 100%;
    transform: scale(6, 6);
    transform-origin: center;
    transition: all 0.5s ease-in-out;
    z-index: 999;

    transform-origin: 54% 14%;
}

Answer 2

您的td隐藏在thead的{{1}}后面，原因是。在表的容器而不是tbody上设置溢出，然后查看是否适合您。

tbody

.card-body {
    /* Instead of tbody */
    height: 200px;
    overflow-y: scroll;
    overflow-x: hidden;
}

.element {
    background-color: green;
}

.element:hover {
    background-size: 100% 100%;
    transform: scale(6, 6);
    transform-origin: center;
    transition: all 0.5s ease-in-out;
    z-index: 999;
}

当元素嵌套在设置为display：block的元素内时，如何允许元素溢出？

2 个答案: