原先只是记住了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影响