Proper scaling of overlaying div in table

Question

I have a problem that I do not understand regarding scaling of child elements inside html tables.

To start from the beginning, my goal is to have a table and to overlay the table body with a div using z-index. With the proper color this then looks like the table is inactive and it can not be clicked.

Below you find a minimal example of how this looks like due to some other requirement. As you can see, the overlay div always scales to the full table and not only a part of it. No matter if it is a child of tbody nor of one cell (as it is right now in the example code - I thought maybe a div is not allowed as a direct child of tbody but instead I could put one overlay div in each table cell).

table {
  border: 1;
  border-color: blue;
}

#content {
  position: relative;
}

#content * {
  position: inherit;
}

#overlay {
  top: 0;
  left: 0;
  /*bottom: 0;
  right: 0;*/
  position: absolute !important;
  background: rgba(0, 0, 0, .4);
  z-index: 3;
  width: 100%;
  height: 100%
}

<div id="content">
  <div>
    Some stuff before
  </div>
  <br>
  <table>
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <div>
            Cell
          </div>
          <div id="overlay"></div>
        </td>
        <td>Cell</td>
      </tr>
      <tr>
        <td>Cell</td>
        <td>Cell</td>
      </tr>
      <tr>
        <td>Cell</td>
        <td>Cell</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>Footer 1</td>
        <td>Footer 2</td>
      </tr>
    </tfoot>
  </table>
  <br>
  <div>
    Some stuff after
  </div>
</div>

I do not understand why this happens which makes it hard for me to think of a fix and I hope somebody can help me with that and provide an explanation.

Cheers

Answer 1

Your table cells also need to be set to position: relative. Instead of #content * directly set them using td or at least #content td.

td {
  position: relative;
}

#overlay {
  top: 0;
  left: 0;
  position: absolute;
  background: rgba(0, 0, 0, .4);
  z-index: 3;
  width: 100%;
  height: 100%
}

<div id="content">
  <table>
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <div>
            Cell
          </div>
          <div id="overlay"></div>
        </td>
        <td>Cell</td>
      </tr>
      <tr>
        <td>Cell</td>
        <td>Cell</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>Footer 1</td>
        <td>Footer 2</td>
      </tr>
    </tfoot>
  </table>
</div>

---

So why does this work?

Short answer: position is not inheritable and Chrome has some problems with table tags.

But that's only half the truth. All major browsers (Tested with Chrome, Firefox and IE11) allow most (or probably even all) properties to inherit from their parent. When you test your snippet in Firefox or IE11 you will see that it indeed works. So why not in Chrome then?

It turns out that Chrome has some issues with the table-* display modes and the table-tags themselves. It always uses the default position value (which is static) when being inherited. Even if the closest parent has position: relative set, it won't work as illustrated in the next code snippet.

So to conclude: It's best to always explicitly set position: relative and in most cases avoid using inherit all together.

main {
  position: relative;
  border: 2px solid #000;
  width: 200px;
  margin-bottom: 20px;
}

table, .fake-table {
  min-height: 50px;
  margin: 10px;
}

table, tr, td, .fake-table div {
  position: inherit;
}

.relative {
  position: relative;
}

em {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  min-width: 100px;
  height: 100%;
  background: rgba(166, 199, 252, .9);
  text-shadow: 0 0 10px #fff;
}

.fake-table .table {
  display: block;
}

.fake-table .row {
  display: flex;
  justify-content: flex-start;
}

.fake-table .cell {
  display: inline-block;
  min-width: 40px;
}

<main>
  <table>
    <tr>
      <td>...</td>
      <td>
        cell
        <em>Starting point (inherited table)</em>
      </td>
    </tr>
  </table>
</main>

<main>
  <table>
    <tr class="relative">
      <td>...</td>
      <td>
        cell
        <em>Parent is set to relative</em>
      </td>
    </tr>
  </table>
</main>

<main class="fake-table">
  <table class="table">
    <tr class="row">
      <td class="cell">...</td>
      <td class="cell">
        cell
        <em>Table tags in different display mode</em>
      </td>
    </tr>
  </table>
</main>

<main class="fake-table">
  <div class="table">
    <div class="row">
      <div class="cell">...</div>
      <div class="cell">
        cell
        <em>Table using flex (behaves correctly)</em>
      </div>
    </div>
  </div>
</main>

<main>
  <table>
    <tr>
      <td>...</td>
      <td class="relative">
        cell
        <em>Expected rendering</em>
      </td>
    </tr>
  </table>
</main>