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>

1111	1111	1111
2222	2222	2222
3333	3333	3333

まずは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>

1111	1111	1111
2222	2222	2222
3333	3333	3333

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>

1111	1111	1111
2222	2222	2222
3333	3333	3333

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



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