How do I show empty table cells?
Author: Deron Eriksson
Description: This CSS tutorial describes how to display empty table cells in IE7 and Firefox.
Tutorial created using: Windows XP


In CSSW, a table can have 2 different border models: separate and collapse. The 'separate' border model is used to display table cell contents where the cell borders are separated from one another, while the 'collapse' border model is used for displaying tables where there is more continuity across cell borders. The table border model can be specified using the 'border-collapse' property.

The CSS 2.1 specification describes the 'empty-cells' property that can be used to show or hide the border of an empty cell when a table's border model is set to 'separate'. The 'empty-cells' property works in Firefox, but does not work in IE7, as illustrated in the following screen capture comparing Firefox and IE7.

Showing empty table cells

The screen capture shows that if you'd like to show an empty table cell in a cross-browser manner (IE7 and Firefox) using the 'separate' border model, you can use ' ' within a table cell to display the border of the empty table cell. Also, notice in the 'separate' table that Firefox and IE7 render an empty cell differently (IE shows no border while Firefox shows the border). Also, notice that the 'empty-cells' property doesn't work in IE7, since both 'show' and 'hide' show no cell borders.

The style-test.html file is shown here.

style-test.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Style Test</title>
<style type="text/css">
</style>
</head>
<body>
<table border="1" style="border-collapse: separate">
	<caption>border-collapse: separate</caption>
	<tr>
		<td></td>
		<td>&larr; empty</td>
	</tr>
	<tr>
		<td>&nbsp;</td>
		<td>&larr; &amp;nbsp;</td>
	</tr>
	<tr>
		<td style="empty-cells: show"></td>
		<td>&larr; empty-cells: show</td>
	</tr>
	<tr>
		<td style="empty-cells: hide"></td>
		<td>&larr; empty-cells: hide</td>
	</tr>
</table>
<br/>
<table border="1" style="border-collapse: collapse">
	<caption>border-collapse: collapse</caption>
	<tr>
		<td></td>
		<td>&larr; empty</td>
	</tr>
	<tr>
		<td>&nbsp;</td>
		<td>&larr; &amp;nbsp;</td>
	</tr>
	<tr>
		<td style="empty-cells: show"></td>
		<td>&larr; empty-cells: show</td>
	</tr>
	<tr>
		<td style="empty-cells: hide"></td>
		<td>&larr; empty-cells: hide</td>
	</tr>
</table>
</body>
</html>