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

我会考虑使用盒阴影来模拟背景色，并避免出现此 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>

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

Answer 2

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

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

为隐藏的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>

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

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

5 个答案: