CSS empty-cells property

src

Description

CSS empty-cells property decides whether to show an empty cell or not.

Syntax

empty-cells : separate | collapse

Property values

showDefault: The table cell is visible even if there is no content within table cell.; empty-cells: show;
Try it
hide: The table cell is not visible when content is not present within table cell.; empty-cells: hide;
Try it

Applicable to

It applies to table element.

Preview

Code

CSS

.element{
width:100px;
height:100px;
background-color: rgba(240,240,240,0.5);
padding:10px;
border:10px solid red;
}
table td, table th{
border:1px solid rgba(230,230,230,1);
}

HTML

<table class="designTable">
<caption class="caption">Score</caption>
<tr>
<th>Name</th>
<th>Aggregate</th>
<th>Degree</th>
</tr>
<tr>
<th>James</th>
<td>70%</td>
<td>BCS</td>
</tr>
<tr>
<th>Chris</th>
<td>80%</td>
<td>BIT</td>
</tr>

<tr>
<th>John</th>
<td>90%</td>
<td></td>
</tr>
</table>

CSS3 Properties

Description

Syntax

Property values

Applicable to