可见性：折叠呈现为可见性：隐藏

Question

  

折叠

     

仅适用于table元素。 collapse删除行或列，但不会影响table布局。行或列占用的空间将可用于其他内容。   如果在其他元素上使用折叠，则会将其渲染为hidden。

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

但是，该元素仍占用visibility: hidden之类的空间。我在Safari和Chrome上测试过。任何人都有一个解决方案，其中table布局得到维护，但空间被删除了吗？

Answer 1

它不会在所有浏览器上运行，只有Firefox和IE（我现在无法确认IE）。 MDN docs on visibility说：

  

在某些现代浏览器中，对visibility:collapse的支持缺失或部分不正确。在许多情况下，除了表行和列之外的元素，它可能没有像visibility:hidden那样正确对待。

您可以使用此jsFiddle测试它：http://jsfiddle.net/meT7k/。在Chrome中，第一行呈现为visibility: hidden。在Firefox中，collapse已正确应用。

在Chrome中，当您将display: none应用于该行时，您会获得所需的结果。但是，这可能会强制重新布局整个表格（例如，在display属性更改后，列宽可能会发生变化。）

Answer 2

将内容包裹在<span></span>中，并将显示设置为无。