当一个元素的visibility属性被设置成collapse值后,对于一般的元素,它的表现跟hidden是一样的,但如果是table相关的元素,例如table行,table group,table列,table column group,它的表现跟display:none一样,也就是说,它们占用的空间会释放。
<html>
<head>
<style type="text/css">
tr.coll
{
visibility:collapse
}
</style>
</head>
<body>
<table border="1">
<tr>
<td>Adams</td>
<td>John</td>
</tr>
<tr class="coll">
<td>Bush</td>
<td>George</td>
</tr>
</table>
</body>
</html>
在谷歌浏览器中,使用collapse值和使用hidden值没什么区别,效果如下
在Firefox、Opera和IE11里,使用collapse值的效果就会消失,下面一行会补充它的位置。效果如下: