覆盖在身体顶部 [英] Overlay on top of tbody

问题描述

我正在尝试在 tbody （并且只有tbody）的顶部创建加载叠加层。我当前的解决方案是将tr添加为 tbody 的最后一个元素，并将其设置为 position：absolute ，并将tbody设置为 position：relative 。

I am trying to create a loading overlay on top of tbody (and only tbody). My current solution is to add tr as the last element of tbody and set it as position: absolute, and setting tbody as position: relative.

table {
  width: 100%;
}

tbody {
  position: relative;
}

.overlay {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(200, 200, 200, 0.7);
}

<table>
  <thead>
    <tr>Label</tr>
  </thead>
  <tbody>
    <tr><td>Data</td></tr>
    <tr><td>Data</td></tr>
    <tr class="overlay">
      <td>My overlay</td>
    </tr>
  </tbody>
</table>

预期的行为是覆盖物覆盖了身体，但没有覆盖头部。另外，该叠加层还应该包含一些内容（例如刷新按钮），因此覆盖每个 td 都不可行。

Expected behavior is that an overlay covers tbody, but not thead. Also this overlay is supposed to contain some content (f.e. refresh button) so covering every td is not an option.

我的解决方案在Firefox，但不是webkit。 Webkit会忽略 tbody 标记上的 position：relative ，因此覆盖层覆盖了整个表等。

My solution works perfectly in Firefox, but not webkit. Webkit somehow ignores position: relative on tbody tag and thus the overlay covers the whole table and more.

已解决
我设法通过在 body上添加 display：table 来使这种方法有效

RESOLVED I have managed to make this approach work by adding display: table on tbody

推荐答案

使用CSS calc应该可以解决此问题。 对该物业的支持也不错。

Using CSS calc should help with this. Support is fairly good for the property too.

您只需要使计算与top属性保持平衡即可。

You just need to balance the calc with the top property.

因此您的CSS会变成：

So your CSS would become:

table {
  width: 100%;
  position: relative;
}

.overlay {
  position: absolute;
  top: 25px;
  width: 100%;
  height: -webkit-calc(100% - 25px);
  height: calc(100% - 25px);
  background-color: rgba(200, 200, 200, 0.7);
}

这是一个工作示例：

table {
  width: 100%;
  position: relative;
}

.overlay {
  position: absolute;
  top: 25px;
  width: 100%;
  height: -webkit-calc(100% - 25px);
  height: calc(100% - 25px);
  background-color: rgba(200, 200, 200, 0.7);
}

<table>
  <thead>
    <tr><td>Label</td></tr>
  </thead>
  <tbody>
    <tr><td>Data</td></tr>
    <tr><td>Data</td></tr>
    <tr class="overlay">
      <td>My overlay</td>
    </tr>
  </tbody>
</table>

使用CSS Calc。

Updated answer using CSS Calc.

这篇关于覆盖在身体顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！