visibility:hidden;
안 보이지만, 공간 차지.

 

display:none; 
안 보이면서, 공간 안 차지.

 

---

[visibility:hidden 예제]

 

 <style>
.a {
   width:250px;
   height:100px;
   border:2px solid #b8064d;
   padding:10px;
   text-align:center;
   background-color:#f8e1eb;
   visibility:collapse
}
.b {
   width:250px;
   height:100px;
   border:2px solid #b8064d;
   padding:10px;
   text-align:center;
   background-color:yellow;
}
</style>

<div class=a>홈짱닷컴 (homzzang.com)</div>
<div class=b>홈페이지 무료 제작 가이드 </div>

 

결과보기

---

[display:none 예제]

 

<style>
.a {
   width:250px;
   height:100px;
   border:2px solid #b8064d;
   padding:10px;
   text-align:center;
   background-color:#f8e1eb; 
   display:none
}
.b {
   width:250px;
   height:100px;
   border:2px solid #b8064d;
   padding:10px;
   text-align:center;
   background-color:yellow;
}
</style>

<div class=a>홈짱닷컴 (homzzang.com)</div>
<div class=b>홈페이지 무료 제작 가이드 </div>

 

결과보기

1. 테이블 자체가 안 보임. 
2. 테이블 height 값 무시됨. 
3. padding값과 width값 유지.

---

 

<style>
table{border:2px solid #b8064d; width:300px; height:300px; padding:10px;visibility:collapse}
tr {}
td {border:2px solid; padding:10px; text-align:center; background-color:#f8e1eb; }
</style>

<table>
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>

<div>홈짱닷컴 (homzzang.com)</div>

 

결과보기

1. 테이블 내부만 안 보임.
2. 테이블 height 값 무시됨. 
3. padding 및 width값 유지.

---

 

<style>
table {border:2px solid #b8064d; width:300px; height:300px; padding:10px;}
tr {visibility:collapse}
td {border:2px solid; padding:10px; text-align:center; background-color:#f8e1eb; }
</style>

<table>

<tr><td>1</td><td>2</td></tr>

<tr><td>3</td><td>4</td></tr>

</table>

<div>홈짱닷컴 (homzzang.com)</div>

 

결과보기