Chrome 可见性：折叠答案

【问题标题】：Chrome Visibility: CollapseChrome 可见性：折叠
【发布时间】：2017-01-15 20:06:22
【问题描述】：

我有一个页面，上面有几个表格。为了提高可读性，每个表格的主体都被折叠起来，所以用户只看到页眉和页脚。有一个按钮可以将其切换为展开。

在 IE 和 Firefox 中，它运行良好。但在 Chrome 和 Safari 中，折叠行的位置有空格。这两个浏览器是否有解决方法可以删除空白？

这里是示例代码：

.collapse {
  visibility: collapse;
}

<table>
  <caption>This is a Table</caption>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
    </tr>
  </thead>
  <tbody class='collapse'>
    <tr>
      <td>Row 1, Cell 1</td>
      <td>Row 1, Cell 2</td>
    </tr>
    <tr>
      <td>Row 2, Cell 1</td>
      <td>Row 2, Cell 2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>TOTAL 1</td>
      <td>TOTAL 2</td>
    </tr>
  </tfoot>
</table>

【问题讨论】：

你检查答案了吗？
是的。有效。谢谢！
我以为我有。对不起。
当然 :) 没问题。投票也将受到赞赏（一旦你有足够的声誉;））
stackoverflow.com/q/42252682/3597276

标签： css google-chrome visibility collapse

【解决方案1】：

Chrome 和 Safari 将 visibility: collapse 视为 visibility: hidden。

这仅适用于 Firefox/IE。

您可以将其更改为 display: none 以确保它在所有浏览器中的工作方式相同，但是这样您将错过 collapse 值的一般概念，其中计算了表格元素的所有宽度/高度并在影响表中其他元素的同时考虑：

.collapse {
  display: none;
}

<table>
  <caption>This is a Table</caption>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
    </tr>
  </thead>
  <tbody class='collapse'>
    <tr>
      <td>Row 1, Cell 1</td>
      <td>Row 1, Cell 2</td>
    </tr>
    <tr>
      <td>Row 2, Cell 1</td>
      <td>Row 2, Cell 2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>TOTAL 1</td>
      <td>TOTAL 2</td>
    </tr>
  </tfoot>
</table>

【讨论】：