mozilla

Compare Revisions

visibility

Change Revisions

Revision 24571:

Revision 24571 by Waldo on

Revision 24572:

Revision 24572 by DBaron on

Title:
visibility
visibility
Slug:
CSS/visibility
CSS/visibility
Tags:
css, "CSS Reference"
css, "CSS Reference"
Content:

Revision 24571
Revision 24572
n14      The <code>visibility</code> property is used to show/hide tn14      The <code>visibility</code> property is used for two things
>he given element. The value <code>collapse</code> should take eff>:
>ect only for table columns/rows or groups of table columns/rows. 
nn16    <ol>
17      <li>The <code>hidden</code> value hides an element but leav
 >es space where it would have been.
18      </li>
19      <li>The <code>collapse</code> value hides rows or columns o
 >f a table.
20      </li>
21    </ol>
n18        <a href="en/CSS/initial_value">Initial value</a>: Visiblen24        <a href="en/CSS/initial_value">Initial value</a>: <code>v
 >isible</code>
n36    <pre class="eval">n42    <p>
37visibility: visible | hidden | collapse | inherit43      <code>visibility</code>: <code>visible</code> | <code>hidde
 >n</code> | <code>collapse</code> | {{template.Cssxref("inherit")}
 >}
38</pre>44    </p>
n42    <ul>n48    <dl>
43      <li>49      <dt>
44        <b>visible</b>: The generated box is visible. Note that t50        <code>visible</code>
>his has no effect in certain situations (eg. when applying <code> 
>{{template.Cssxref("display")}}: none</code> at the same time or  
>working with <code>&lt;input type="hidden"&gt;</code>) 
45      </li>51      </dt>
46      <li>52      <dd>
47        <b>hidden</b>: The generated box is hidden, yet it is NOT53        The element is displayed normally.
> removed from the actual flow of the page. It still affects layou 
>t. You can consider the box being fully transparent. Note that de 
>scendants of such box may set <code>visibility: visible</code> to 
> become visible again. 
48      </li>54      </dd>
49      <li>55      <dt>
50        <b>collapse</b>: The <code>collapse</code> property is eq56        <code>hidden</code>
>uivalent to <code>hidden</code> for most elements, with the excep 
>tion of table columns, rows, and groups of table rows or table co 
>lumns. In these cases, the effect is as if <code>{{template.Cssxr 
>ef("display")}}: none</code> were applied to the column/row of th 
>e table, except that the contents of existing table cells are con 
>strained to their current dimensions instead of recalculating the 
>m. This allows for fast removal of a row/column from a table with 
>out having to recalculate widths and heights for every portion of 
> the table. 
51      </li>57      </dt>
58      <dd>
59        The element is hidden, but other elements are positioned 
 >as though it were present. This acts like the element is fully tr
 >ansparent. Note that descendants with <code>visibility: visible</
 >code> can be visible again.
60      </dd>
61      <dt>
62        <code>collapse</code>
63      </dt>
64      <dd>
65        For table rows, table columns, table column groups, and t
 >able row groups, the row(s) or column(s) are hidden and the space
 > they would have occupied is (as if <code>{{template.Cssxref("dis
 >play")}}: none</code> were applied to the column/row of the table
 >). However, the size of other rows and columns is still calculate
 >d as though the cells in the collapsed row(s) or column(s) are pr
 >esent. This was designed for for fast removal of a row/column fro
 >m a table without having to recalculate widths and heights for ev
 >ery portion of the table. (For other elements, <code>collapse</co
 >de> is treated the same as <code>hidden</code>.)
66      </dd>
52    </ul>67    </dl>
t67    <ul>t82    <p>
68      <li>Note that the support for <code>visibility: collapse</c83      The support for <code>visibility: collapse</code> is missin
>ode> is missing or partially incorrect in some modern browsers.>g or partially incorrect in some modern browsers. In many cases i
 >t may not be correctly treated like <code>visibility: hidden</cod
 >e> on elements other than table rows and columns.
69      </li>
70    </ul>84    </p>
85    <p>
86      <code>visibility:collapse</code> may change the layout of a
 > table if the table has nested tables within the cells that are c
 >ollapsed, unless <code>visibility: visible</code> is specified ex
 >plicitly on nested tables.
87    </p>

Back to History