visibilityプロパティは、ボックスの表示(visible)・非表示(hidden)を指定する際に使用します。
非表示にした場合にも、ボックス自体が無くなってしまうわけではなく、表示・非表示を切り替えてもページのレイアウトは変わりません。
ボックス自体を無くしてしまいたい場合には、displayプロパティでnoneを指定します。
テーブル(表)の行や列にvisibility:collapseを指定した場合の表示は、ブラウザの種類やバージョンによって若干異なるので注意してください。
.sample1 {visibility:hidden;}
.sample2 {visibility:visible;}
.sample3 {visibility:collapse;}
<html>
<head>
<link rel=”stylesheet” href=”sample.css”
type=”text/css”>
</head>
<body>
<h3>左の画像にvisibility:hidden、右の画像にvisibility:visibleを適用</h3>
<p>
<img src=”https://www.htmq.com/wp-content/themes/htmq/htmq-images/kaeru.gif” class=”sample1″>
<img src=”https://www.htmq.com/wp-content/themes/htmq/htmq-images/kaeru.gif” class=”sample2″>
</p>
<h3>一部のセルにvisibility:collapseを適用</h3>
<table border=”1″>
<tr class=”sample3″>
<td>しゃこ(売り切れ)</td>
<td>えび(売り切れ)</td>
<td>こはだ(売り切れ)</td>
</tr>
<tr>
<td class=”sample3″>いくら(売り切れ)</td>
<td>うに</td>
<td>とろ</td>
</tr>
</table>
</body>
</html>
しゃこ(売り切れ) | えび(売り切れ) | こはだ(売り切れ) |
いくら(売り切れ) | うに | とろ |