CSS/Properties/empty-cells

From Web Education Community Group
< CSS‎ | Properties
Revision as of 18:37, 21 November 2011 by Rworth (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

empty-cells

The empty-cells property controls the rendering of borders and backgrounds around cells that have no visible content.

Description

Values show | hide | inherit
Initial value show
Applies to 'table-cell' elements
Inherited Yes


Values

  • show
    Borders and backgrounds are drawn around/behind empty cells.


  • hide
    No borders or backgrounds are drawn around/behind empty cells.


  • inherit
    Takes the same specified value as the property for the element's parent.


Example

Example A

[style.css]

 table{
   border-width: 1px;
   border-style: solid;
   border-collapse: separate;
   width: 400px;
 }
 #sh{
   empty-cells: show;
   margin-bottom: 20px;
 }
 #hi{
   empty-cells: hide;
 }
 tr, th, td{
   border-width:1px;
   border-style: solid;
 }

[index.html]

<body>
  <table id="sh">
    <caption>Example 1. Show</caption>
    <tr>
      <th>Values</th>
      <td>top | bottom | inherit</td>
    </tr>
    <tr>
      <th>Initial value</th>
      '''<td></td>'''
    </tr>
  </table>
  <table id="hi">
    <caption>Example 2. Hide</caption>
    <tr>
      <th>Values</th>
      <td>top | bottom | inherit</td>
    </tr>
    <tr>
      <th>Initial value</th>
      '''<td></td>'''
    </tr>
  </table>
</body>

Csslist2 empty-cells.png

CSS Reference

The CSS specification defines the empty-cells property in 17.6.1.1 Borders and Backgrounds around empty cells.