CSS3

プロパティ

visibility

→●、mdn

可視性。

visibility プロパティは、要素が生成するボックス（たち）を描画する（可視にする）かどうかを指定する。ボックスは、不可視にされても、依然としてレイアウトには影響する（対して、display プロパティに対する none は、ボックス生成を抑止する）。

visible

生成されるボックスは可視になる。

開始<SPAN style="border:1px solid red;
 visibility:visible;
">テスト</SPAN>終了

hidden

生成されるボックスは不可視になる（全部的に透明、かつ 何も描かれない）が、依然として レイアウトには影響する。加えて、要素の子孫であっても、visibility が visible にされたものは可視になる。

開始<SPAN style="border:1px solid red;
 visibility:hidden;
">テスト</SPAN>終了

collapse

テーブルにおける § row／column に対する動的な効果 をあたられたし。この値は、［row／row グループ／column／column グループ］以外の要素で利用された場合には、hidden と同じ意味になる。

【この値は、テーブルの column や row を まるごと消す（空間も占めなくなる）が、テーブル他のレイアウト（cell 幅など）は、消されないときと同じに保たせる】
【row／row グループ に対しては、消すだけなら display: none で代用できる。】
【特に、column／column グループ に対しては、正しく機能しない ユーザー エージェントもある。あるいは、テーブルの border-collapse プロパティが collapse にされている場合も。】

<TABLE style="border:1px solid black">
 <TR>
  <TD style="border:1px solid red;
   visibility:collapse;
  ">TD1
  <TD style="border:1px solid black;">TD2
</TABLE>

<TABLE style="border:1px solid black">
 <TR>
  <TD style="border:1px solid black;">１
  <TD style="border:1px solid black;">２
 <TR style="
   visibility:collapse;
  ">
  <TD style="border:1px solid black;">３
  <TD style="border:1px solid black;">４
 <TR>
  <TD style="border:1px solid black;">５
  <TD style="border:1px solid black;">６
</TABLE>

このプロパティは、スクリプトその他の動的な効果と併用できる。

collapse の用例：

次の 3 行、3 列の HTML テーブルが与えられたとする：

2 行目（の TR 要素）¶に visibility: collapse をあてがったとき、表示例：

row／column が消されても、他の row／column 内のセルのサイズは，そのままに保たれるであろう。

テスト