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

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

  

    Visible
    Not visible
    Visible
  

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