重新认识visibility

2019独角兽企业重金招聘Python工程师标准>>>

原先只是记住了display:none不点位，visibility:hidden要占位显示。

今天看到table中，列样式支持四个css的表格样式之外的属性：border width background visibility。
言外之意就是就像给表格的<tr>上加样式控制整行一样，
给表格的<col>标签可以添加上面四个属性，在col上增加样式控制整列样式。但要记住优先级是：cell ->row ->col ->table。

visibility 的4个可选值: visible, hidden, collapse, and inherit。 下面是我总结的：

值	普通元素	表格<col>元素
visible	显示占位	无效！正常显示
hidden	隐藏点位	无效！正常显示
collapse	同hidden	隐藏。合并格会剪切
inherit	默认，未研究	未研究

 

测试:

1、div和table元素设置collapse时，在edge中，完全隐藏的！
2、表格的col元素设置collapse时，该列隐藏，表宽度自动减少。
对于如果该列有横向合并 单元格，合并格宽度自动减少，
但“内容不会自动再布局，而是直接剪去相应宽度。clipped!"

什么意思呢？ 假如是合并格原先是居中的，collapse其中的某一列后，合并格像从右边直接剪去列宽度，就是文字不再重排，不会居中，文字如果长的话，直接会tgtg截断！

3、col元素设置display:none。个人理解，它不去影响表格的列样式，只是让自身的col标签没有。

什么意思呢？假如一组col标签控制表格每个列宽度，如果设置其中一个col为display:none时，并不会让相应列隐藏，而只是让当前的col标签失效，从而后面的col影响

转载于:https://my.oschina.net/u/1540190/blog/745211