CSS里的visibility属性有个鲜为人知的属性值:collapse
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。
对于CSS里的visibility
属性,相信你用过不下几百次。大多时候,你会把它的值设置成visible
(这是所有页面元素的缺省值),或者是hidden
。后者相当于display: none
,但仍然占用页面空间。
其实visibility
可以有第三种值,就是collapse
。当一个元素的visibility
属性被设置成collapse
值后,对于一般的元素,它的表现跟hidden
是一样的。但例外的是,如果这个元素是table相关的元素,例如table行,table group,table列,table column group,它的表现却跟display: none
一样,也就是说,它们占用的空间也会释放。
但遗憾的是,各种浏览器对collapse
值的处理方式不一样。看一下下面的演示:
HTML代码
<table cellspacing="0" class="table"> <tr> <th>Fruits</th> <th>Vegetables</th> <th>Rocks</th> </tr> <tr> <td>Apple</td> <td>Celery</td> <td>Granite</td> </tr> <tr> <td>Orange</td> <td>Cabbage</td> <td>Flint</td> </tr> </table> <p><button>collapse行1</button></p> <p><button>hide行1</button></p> <p><button>重置</button></p>
CSS代码
body { text-align: center; padding-top: 20px; font-family: Arial, sans-serif; } table { border-collapse: separate; border-spacing: 5px; border: solid 1px black; width: 500px; margin: 0 auto; } th, td { text-align: center; border: solid 1px black; padding: 10px; } .vc { visibility: collapse; } .vh { visibility: hidden; } button { margin-top: 5px; }
Javascript代码
var btns = document.getElementsByTagName('button'), rows = document.getElementsByTagName('tr'); btns[0].addEventListener('click', function () { rows[1].className = 'vc'; }, false); btns[1].addEventListener('click', function () { rows[1].className = 'vh'; }, false); btns[2].addEventListener('click', function () { rows[1].className = ''; }, false);
演示
CSS-Tricks的Almanac建议说不要使用这个值,因为浏览器的不统一。
据我的观察:
- 在谷歌浏览器里,使用
collapse
值和使用hidden
值没有什么区别。 (See this bug report and comments) - 在火狐浏览器、Opera和IE11里,使用
collapse
值的效果就如它的字面意思:table的行会消失,它的下面一行会补充它的位置。
说实话,估计这个值很少人会使用它,但你要知道确实可以使用这样的一个值,如果以前不知道它,那么,现在,在有些罕见的地方,你也许就会变得聪明一点了。
阅读余下内容
visibility: collapse可以隐藏表行的数据,但是可以保证表头列的自动调整宽度仍然根据列的宽度调整
visibility: collapse可以隐藏表行的数据,但是可以保证表头列的自动调整宽度仍然根据隐藏行列的宽度调整