Show Empty cells in Table using CSS in Internet Explorer

Recently I had designed a table in an aspx page in Visual studio 2008. The table contains two rows of data. But under certain conditions only one row of data will be available for showing. In this scenario the other row and the empty cells where not showing up while the page was rendered and it looked odd to look at



The business requirement was to show all the cells even if no data is available.

The above HTML table was rendered with the following code

<table width="100%" border="1" cellpadding="2" cellspacing="0">

I tried GOOGLING for the solution and found that there is a style property called empty-cells:show
but the style was not working in IE.
Then my search ended in the following page.

http://www.tgrayimages.com/show-empty-table-cells-with-css-in-internet-explorer/

I made a mix and match of the tip provided there and ended up with the following code.

<table width="100%" border="1" cellpadding="2" cellspacing="0" style="border-collapse:collapse;empty-cells:show;">

and the table started to behave as required. For easy understanding of the tip I have used inline CSS but it is always good to use a separate style sheet to apply style to your pages

And this is how the table got rendered after I applied the style property



It indeed gives a better look and as per usability is considered this look is easy on the eyes of the viewer