2009年5月27日水曜日

display:none と visibility: hidden

隠したいタグがあるときはCSSのdisplay:noneかvisibility: hiddenを使うことができます。
どちらもタグを隠しますが、どう違うのよ!
試したらちょっと挙動が違いました。


下の表の2行目のtrのタグをdisplay:noneとvisibility: hiddenで隠してみます。
<table border="1" style="background-color:#cccccc">
<tr><td>1111</td><td>1111</td><td>1111</td></tr>
<tr><td>2222</td><td>2222</td><td>2222</td></tr>
<tr><td>3333</td><td>3333</td><td>3333</td></tr>
</table>
111111111111
222222222222
333333333333



まずはdisplay:none
<table border="1" style="background-color:#cccccc">
<tr><td>1111</td><td>1111</td><td>1111</td></tr>
<tr style="display:none"><td>2222</td><td>2222</td><td>2222</td></tr>
<tr><td>3333</td><td>3333</td><td>3333</td></tr>
</table>
111111111111
222222222222
333333333333

2行目が無くなってしまいました。



次にvisibility: hidden
<table border="1" style="background-color:#cccccc">
<tr><td>1111</td><td>1111</td><td>1111</td></tr>
<tr style="visibility: hidden"><td>2222</td><td>2222</td><td>2222</td></tr>
<tr><td>3333</td><td>3333</td><td>3333</td></tr>
</table>
111111111111
222222222222
333333333333

2行目のスペースが残ったまま隠れました。



場合によって使い分けろってことなんでしょうが、
こんな感じの似たような設定があると困ります;;

0 件のコメント:

コメントを投稿