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值的一般概念，其中所有宽度/高度都是表格的元素在计算表格中的其他元素时会被计算并考虑在内：

＆＃13;

.collapse {
  display: none;
}

＆＃13;

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

＆＃13;

Chrome可见性：折叠

1 个答案: