【CSSリファレンス】visibility

こんにちは（・∀・）

CSSプロパティのご紹介です。今回ご紹介するCSSプロパティはvisibilityです。

概要

visibilityプロパティを使用してテーブルの行または列の表示・非表示を指定します。

*Chrome・Safariは対応しておりません。

.sample {
  visibility: collapse;
}

適用要素

すべての要素

指定できる値

visible

ボックスを表示

hidden

ボックスの非表示
空白の領域がそのまま表示

collapse

テーブルの行・列(グループ)を非表示
次の行・列(グループ)は詰めて表示
テーブル以外に指定した場合はhiddenと同様の結果になります。

初期値

visible

サンプル

HTML

<table>
<caption>bottom</caption>
<tr>
<td>サンプルデモ</td>
<td>サンプルデモ</td>
</tr>
<tr class="sample">
<td>表示されません</td>
<td>表示されません</td>
</tr>
<tr>
<td>サンプルデモ</td>
<td>サンプルデモ</td>
</tr>
</table>

CSS

.demo table {
  border: 2px solid #9fb7d4;
  border-collapse: separate;
}
.demo table td {
  border: 2px solid #d49fc2;;
}
.demo table .sample {
  visibility: collapse;
}

Result