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>

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.

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.

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

score 2 · Answer 1 · 2017-12-04T13:52:50.263

2

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>

Updated answer using CSS Calc.

edited Dec 04 '17 at 13:52

answered Dec 04 '17 at 13:34

You got an error: tr without td. Valid html breaks supposed view. – 3rdthemagical Dec 04 '17 at 13:40
Unfortunately by using this approach, the whole table is coverered by overlay not only tbody. – Tomáš Ondruš Dec 04 '17 at 13:40
For me it's covering most of the table, but leaving the table header visible. – Dec 04 '17 at 13:41
@TomášOndruš I can confirm that the `thead` element remains visible with this method (in Chrome and FF Quantum) – UncaughtTypeError Dec 04 '17 at 13:46
@TomášOndruš please see my updated answer. It's using calc now. – Dec 04 '17 at 13:47

score 0 · Answer 2 · edited Feb 18 '21 at 18:56

IMHO: In browsers which support CSS3 position:relative on table elements should work. As you have rightly revealed: it works only in Firefox. Not in IE, Edge and Chrome.

Sources:

https://www.w3.org/TR/css-position-3/#valdef-position-relative

https://www.w3.org/TR/css-position-3/#property-index

Property name: position Applies to: all elements except table-column-group and table-column

https://developer.mozilla.org/en-US/docs/Web/CSS/position#relative About 'stacking context' but that is not the subject of this question

This value (position: relative) creates a new stacking context when the value of z-index is not auto. Its effect on table-*-group, table-row, table-column, table-cell, and table-caption elements is undefined.

Related question:

Bug in most browsers?: Ignoring position relative on 'tbody', 'tr' and 'td'?

score -1 · Answer 3 · answered Dec 04 '17 at 13:43

-1

you have to remove the position relative on tbody and out it on table instead.

table {
  width: 100%;
  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><div>My overlay</div></td>
    </tr>
  </tbody>
</table>

answered Dec 04 '17 at 13:43

behdad

44
5

This is strange. The snippet you provided actually works in here, but not in my project (react based). Is there anything that can mess up calculation of the top offset or something? (there are no additional styles applied to it) – Tomáš Ondruš Dec 05 '17 at 09:08
I don’t think you need any additional style. Although there might be other style in your project that overrides this style somehow. What I can suggest is that check your css carefully to see where exactly it’s being overridden – behdad Dec 06 '17 at 06:42
You see, this example does not behave as expected. This is because the HTML code in example is not valid. `thead tr` missing `td`. After the bug fixes, the example behaves correctly. But then it is not a solution to the problem. – Matěj Kříž Oct 03 '18 at 10:32

Overlay on top of tbody

3 Answers3

Sources:

Related question:

Linked