Chrome 可见性：折叠

Question

我的页面上有几个 table。为了提高可读性，每个 table 的正文都被折叠起来，因此用户只能看到页眉和页脚。有一个按钮可以将其切换为展开。

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

示例代码如下：

.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 值的一般概念，其中所有 width/height 的 table 的元素被计算和考虑，同时影响 table 中的其他元素：

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

Chrome 可见性：折叠

Chrome Visibility: Collapse

css

visibility

google-chrome

collapse