visiblity: скрыто от ячейки таблицы, скрывает цвет фона родительской строки таблицы

Question

У меня есть некоторые формы, которые структурированы с использованием display:table-row и display: table-cell.В Firefox 52 я мог скрыть элемент ячейки, используя visibility:hidden, скрывая ячейку, но сохраняя структуру, определенную CSS (вместо использования display:none).

Хотя в Firefox 64 (и также chrome),когда я скрываю видимость ячейки, строка родительской таблицы теряет цвет фона в этой позиции.

Вот фрагмент, показывающий проблему:

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

Я пытался использовать opacity: 0, но некоторые элементы кликабельны или имеют разные события и непрозрачность на 0 не поможет.

Любые мысли?Это предназначено?

Answer 1

Следуйте структуре

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

Я бы посоветовал box-shadow для имитации фоновой окраски и избежал этой ошибки *

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

* это, вероятно, не ошибка, но я не могу найти спецификацию, описывающую это поведение

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

Добавить font-size: 0 опция для скрытого 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

Вы можете использовать трюк с color:transparent и для предотвращения событий (из a) используйте 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>

С входами:

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