Visiblity:hidden Of Table-cell Hides Background-color Of Parent Table-row

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 visibility:hidden, hiding the cell but keepi

Solution 1:

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

.container {
  display: table;
}

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

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

#hide {
  visibility: hidden;
}

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

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

Solution 2:

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

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

Solution 3:

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

<divid="tableRow"><ahref="#"class="cell">Visible</a><ahref"#" class="cell"id="hide">Not visible</a><ahref="#"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;
    }

<divid="tableRow"><ahref="#"class="cell">Visible</a><inputhref"#" class="cell"id="hide"/><ahref="#"class="cell">Visible</a></div>

Solution 4:

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
}

<divid="tableRow"><ahref="#"class="cell">Visible</a><ahref"#" class="cell"id="hide"><inputtype="text"/><buttontype="button">Click Me!</button>
    Not Visible</a><ahref="#"class="cell">Visible</a></div>

Solution 5:

Follow the structure

#tableRowul {
    display: table-row;
    background-color: #f5f5f5;
}
#tableRowulli {
    display: table-cell;
}

#hide {
    visibility: hidden;
}

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