從新認識visibility

原先只是記住了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	默認，未研究	未研究

 

測試:

一、div和table元素設置collapse時，在edge中，徹底隱藏的！
二、表格的col元素設置collapse時，該列隱藏，表寬度自動減小。
對於若是該列有橫向合併 單元格，合併格寬度自動減小，
但「內容不會自動再佈局，而是直接剪去相應寬度。clipped!"

什麼意思呢？ 假如是合併格原先是居中的，collapse其中的某一列後，合併格像從右邊直接剪去列寬度，就是文字再也不重排，不會居中，文字若是長的話，直接會tgtg截斷！

三、col元素設置display:none。我的理解，它不去影響表格的列樣式，只是讓自身的col標籤沒有。

什麼意思呢？假如一組col標籤控制表格每一個列寬度，若是設置其中一個col爲display:none時，並不會讓相應列隱藏，而只是讓當前的col標籤失效，從然後面的col影響