css - 可见性 :collapse is rendered as visibility:hidden

Question

Collapse

Only for table elements. collapse removes a row or column, but it does not affect the table layout. The space taken up by the row or column will be available for other content. If collapse is used on other elements, it renders as hidden.

http://www.w3schools.com/cssref/pr_class_visibility.asp

但是，元素仍然像visibility: hidden一样占用空间。我在 Safari 和 Chrome 上测试过。任何人都有一个解决方案，即保留 table 布局但删除空间？

Answer 1

它不会在所有浏览器上按预期工作，只有 Firefox 和 IE(我现在无法确认 IE)。 MDN docs on visibility说:

The support for visibility:collapse is missing or partially incorrect in some modern browsers. In many cases it may not be correctly treated like visibility:hidden on elements other than table rows and columns.

你可以用这个 jsFiddle 测试它:http://jsfiddle.net/meT7k/ .在 Chrome 中，第一行呈现为 visibility: hidden。在 Firefox 中，collapse 被正确应用。

在 Chrome 中，当您将 display: none 应用到该行时，您会得到想要的结果。但是，这可能会强制重新布局整个表格(例如，在 display 属性更改后列宽可能会更改)。