html - Overlay on top of tbody

Question

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>

Answer 1

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

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

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);
}

Here's a working example:

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>