html - 叠加在 tbody 之上

Question

我正在尝试在 tbody(并且只有 tbody)之上创建一个加载叠加层。我目前的解决方案是将tr添加为tbody的最后一个元素，并将其设置为position: absolute，并将tbody设置为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>

预期的行为是叠加层覆盖 tbody，但不覆盖 thead。此外，此叠加层应该包含一些内容(例如刷新按钮)，因此无法覆盖每个 td。

我的解决方案在 Firefox 中运行良好，但在 webkit 中运行不佳。 Webkit 以某种方式忽略了 tbody 标签上的 position: relative，因此叠加层覆盖了整个 table 等等。

---

已解决 我通过在 tbody 上添加 display: table 设法使这种方法起作用

Answer 1

使用 CSS calc 应该对此有所帮助。 Support is fairly good也是为了属性(property)。

你只需要平衡 calc 和 top 属性。

所以你的 CSS 会变成:

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 更新了答案。