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

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

  

    
Label
  
  

    
Data
    
Data
    

      
My overlay
    
  

Updated answer using CSS Calc.