可见性：隐藏表格单元格隐藏父表格行的背景颜色答案

【问题标题】：visiblity:hidden of table-cell hides background-color of parent table-row可见性：隐藏表格单元格隐藏父表格行的背景颜色
【发布时间】：2019-05-23 15:29:45
【问题描述】：

我有一些使用display:table-row 和display: table-cell 构建的表单。在 Firefox 52 上，我可以使用 visibility:hidden 隐藏单元格元素，隐藏单元格但保持 CSS 定义的结构（而不是使用 display:none）。

在 Firefox 64（以及 chrome）上，当我隐藏单元格的可见性时，父表格行在该位置失去其背景颜色。

这是一个显示问题的 sn-p：

#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 将无济于事。

有什么想法吗？这是故意的吗？

【问题讨论】：

标签： jquery html css firefox

【解决方案1】：

您可以对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>

【讨论】：

听起来不错，但就我而言，有些输入和其他内容不会被 color:transparent 隐藏。

【解决方案2】：

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

【讨论】：

谢谢，但这不起作用，因为 table-rows 父级已经有 display:table

【解决方案3】：

为隐藏的 div 添加font-size: 0 选项。

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

【讨论】：

谢谢，但我在每个单元格中都有输入和其他内容，它们不会被 font-size:0 隐藏。也许我的解决方案是重构 html？我很高兴知道为什么它突然坏了：/
这仍然不能解决问题中描述的背景颜色问题

【解决方案4】：

我会考虑 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>

*这可能不是错误，但我找不到任何描述此行为的规范

【讨论】：

谢谢，这似乎效果最好。透明的背景颜色不会隐藏包裹的元素，并且使用 font-size 0 会更改表格宽度。然而，这使事情保持一致。

【解决方案5】：

遵循结构

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

【讨论】：