Exemple de code de la propriété CSS visibility.
<style type="text/css">
.conteneurtable, .conteneurtable td {
border:1px solid #666;
}
.conteneur {
width:300px;
border:1px dotted #666;
margin-bottom: 5px;
}
.conteneur p {
margin:0;
position:relative;
left:0px; top:0px;
width:300px; height:60px;
background-color: #cceebd;
}
.hidden {
visibility : hidden
}
.visible {
visibility : visible
}
.collapse {
visibility : collapse;
}
</style>
<b>visibility: visible</b>
<div class="conteneur">
<p class="defaut visible">Je suis visible</p>
</div>
<b>visibility: hidden</b>
<div class="conteneur">
<p class="defaut hidden">Je ne suis pas visible</p>
</div>
<b>visibility: collapse & visibility: collapse<br> sur cellule</b>
<table width="300px" border="1" class="conteneurtable">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td class="collapse">3</td>
</tr>
<tr>
<td>5</td>
<td class="hidden">6</td>
</tr>
</table>
<b>visibility: hidden & visibility: collapse<br> sur colonne et ligne</b>
<table width="300px" border="1" class="conteneurtable">
<col id="col1"><col id="col2" class="collapse"><col id="col3">
<tr id="row1">
<td> 1 </td>
<td> 2 </td>
<td> 3 </td>
</tr>
<tr id="row2" class="hidden">
<td> 4 </td>
<td> 5 </td>
<td> 6 </td>
</tr>
<tr id="row3">
<td> 7 </td>
<td> 8 </td>
<td> 9 </td>
</tr>
<tr id="row4" class="collapse">
<td> 10 </td>
<td> 11 </td>
<td> 12 </td>
</tr>
<tr id="row5" >
<td> 13 </td>
<td> 14 </td>
<td> 15 </td>
</tr>
</table>
Interprétation du code de la propriété visibility CSS par votre navigateur.
visibility: visible
visibility: hidden
visibility: collapse & visibility: collapse
sur cellule
visibility: hidden & visibility: collapse
sur colonne et ligne
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
Interprétation normale du code de la propriété CSS visibility (copie d'écran).