css - Chrome 可见性 : Collapse

Question

我有一个包含多个表格的页面。为了提高可读性，每个表格的主体都是折叠的，因此用户只能看到页眉和页脚。有一个按钮可以将其切换为展开。

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

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