要素を表示する・しないを切り替えます。
値 | 説明 |
visible | 表示します。(C2/e4/N6/Fx1/Ch1/Op4/Sa1) |
hidden | 非表示にします。折り畳みは行いません。行や行グループには適用できますが、列・列グループには適用できないようです。(C2/e4/N6/Fx1/Ch1/Op4/Sa1) |
collapse | テーブルの行(tr)、行グループ(thead, tbody, tfoor)、列(col)、列グループ(colgroup)を非表示にし、折り畳みます。これらの要素以外に適用した場合は hidden と同じ意味になります。Chrome 18、Safari 5.1.5 では、実装は行われているものの、行や列でも hidden と同じ動作になるようです。(C3/e/Fx/Op) |
visibility: hidden の場合、非表示にはなりますが、表示の折り畳みは行われず、要素分の領域は確保されたままになります。表示の折り畳みを行いたい場合は display: none を指定してください。下記の例では、JavaScript で入力欄の display や visibility を変更しています。
HTML
<input type="checkbox"
onclick="document.getElementById('addr1').style.display = this.checked ? 'block' : 'none';">
住所を変更する(displayによる実装)
<div id="addr1" style="display:none">住所:<input type="text"></div>
<hr>
<input type="checkbox"
onclick="document.getElementById('addr2').style.visibility = this.checked ? 'visible' : 'hidden';">
住所を変更する(visibilityによる実装)
<div id="addr2" style="visibility:hidden">住所:<input type="text"></div>
表示
CSS
.sample-table {
border: 1px solid #666666;
}
.sample-table td {
border: 1px solid #666666;
background-color: #cc9999;
}
.sample-visible {
visibility: visible;
}
.sample-hidden {
visibility: hidden;
}
.sample-collapse {
visibility: collapse;
}
HTML
<h5>block(div)</h5>
<div class="sample-visible">visible</div>
<div class="sample-hidden">hidden</div>
<div class="sample-visible">visible</div>
<div class="sample-collapse">collapse</div>
<div class="sample-visible">visible</div>
<h5>inline(span)</h5>
<div>
[ <span class="sample-visible">visible</span>
| <span class="sample-hidden">hidden</span>
| <span class="sample-visible">visible</span>
| <span class="sample-collapse">collapse</span>
| <span class="sample-visible">visible</span> ]
</div>
<h5>row(tr) / row group(thead, tbody, tfoot)</h5>
<table class="sample-table">
<tr class="sample-visible"><td>visible</td><td>visible</td></tr>
<tr class="sample-hidden"><td>hidden</td><td>hidden</td></tr>
<tr class="sample-visible"><td>visible</td><td>visible</td></tr>
<tr class="sample-collapse"><td>collapse</td><td>collapse</td></tr>
<tr class="sample-visible"><td>visible</td><td>visible</td></tr>
</table>
<h5>column(col) / column group(colgroup)</h5>
<table class="sample-table">
<col class="sample-visible">
<col class="sample-hidden">
<col class="sample-visible">
<col class="sample-collapse">
<col class="sample-visible">
<tr><td>visible</td><td>hidden</td><td>visible</td><td>collapse</td><td>visible</td></tr>
<tr><td>visible</td><td>hidden</td><td>visible</td><td>collapse</td><td>visible</td></tr>
<tr><td>visible</td><td>hidden</td><td>visible</td><td>collapse</td><td>visible</td></tr>
</table>
表示
block(div)
visible
hidden
visible
collapse
visible
inline(span)
[ visible
| hidden
| visible
| collapse
| visible ]
row(tr) / row group(thead, tbody, tfoot)
visible | visible |
hidden | hidden |
visible | visible |
collapse | collapse |
visible | visible |
column(col) / column group(colgroup)
visible | hidden | visible | collapse | visible |
visible | hidden | visible | collapse | visible |
visible | hidden | visible | collapse | visible |