visiblity:hidden of table-cell hides background-color of parent table-row

I would consider box-shadow to simulate a background coloration and avoid this bug *

.container {
  display: table;
}

#tableRow {
  display: table-row;
  box-shadow: -100vw 0 0 red inset;
}

.cell {
  display: table-cell;
  padding: 10px;
}

#hide {
  visibility: hidden;
}

<div class="container">
  <div id="tableRow">
    <a href="#" class="cell">Visible</a>
    <a href="#" class="cell" id="hide">Not visible</a>
    <a href="#" class="cell">Visible</a>
  </div>
</div>

*it's probably not a bug but I am not able to find any specification describing this behavior

Tags:

Html

Css

Firefox

Jquery

Related