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 visibility:hidden , hiding the cell but keeping the structure defined by CSS (instead of using display:none ).

On Firefox 64 though (and also chrome), when I hide the visibility of the cell, the parent table-row loses its background color on that position.

Here's a snippet showing the issue:

 #tableRow{ display: table-row; 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> 

I tried using opacity: 0 but some elements are clickable or have different events and opacity on 0 won't help.

Any thoughts? Is this intended?

Answer 1

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

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

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 5

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>