• Post category:CSS

How to Hide Empty Cells in HTML Table | Easy Way

Empty-cells Property in CSS

Mostly empty-cells property in css is used to hide the empty cells in the table. It has “show” and “hide” values. If we give “show” as value, the empty cells will display. If we give “hide” as value, the empty cells won’t display. The default value of empty-cells property is show.

HTML:

<table id="myTable" border="1" cellpadding="3">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td> </td>
</tr>
</table>

In the above code, we have created 4 cells in table in which only one cell is empty without any content.
If you want to hide empty cells that have no content, use the empty-cells and set the value to “hide”.

#myTable {
empty-cells: hide;
}

Expected output:

empty-cells property in css

 

Leave a Reply