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

Question

I have some forms that are structured using display:table-row and display: table-cell. On Firefox 52, I could hide a cell element using visib

Answer 1

Add font-size: 0 option for hidden div.

#tableRow{
  display: table-row;
  background-color: #e5e8ec;
}
.cell{
  display:table-cell;
}
#hide,
#hide>* {
  font-size: 0;
  border: 0;
  outline: 0;
  margin: 0;
  padding: 0;
  height: 0;
  background: transparent;
  width: 75px
}

<div id="tableRow">
  <a href="#" class="cell">Visible</a>
  <a href"#" class="cell"id="hide">
    <input type="text"/>
    <button type="button">Click Me!</button>
    Not Visible</a>
  <a href="#" class="cell">Visible</a>
</div>

Answer 2

You can use trick with color:transparent and to prevent events(of a) use pointer-events: none;

#tableRow{
  display: table-row;
  background-color: red;
}
.cell{
  display:table-cell;
}
#hide{
  color:transparent;
  pointer-events: none;
}

<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>

With inputs:

    #tableRow{
      display: table-row;
      background-color: red;
    }
    .cell{
      display:table-cell;
    }
    #hide{
      color:transparent;
      pointer-events: none;
      border:none;
      outline:0;
      padding: 2px;
    }

<div id="tableRow">
      <a href="#" class="cell">Visible</a>
      <input href"#" class="cell" id="hide"/>
      <a href="#" class="cell">Visible</a>
</div>

Answer 3

#tableRow{
  display: table;
  background-color: #f5f5f5;
}
.cell{
  display:table-cell;
}
#hide{
  visibility:hidden;
}

<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>

Answer 4

Follow the structure

#tableRow ul {
    display: table-row;
    background-color: #f5f5f5;
}
#tableRow ul li {
    display: table-cell;
}

#hide {
    visibility: hidden;
}

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

Answer 5

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