Show Empty Table Cells with CSS in Internet Explorer
When you create a html table and apply a border using CSS, then the empty cells do not have a border. So you pull out your CSS book and find empty-cells:show; and think your problems are solved but empty-cells is unsupported in IE…go figure. But I have found a combination of styles that work. Try this…apply the border-collapse:collapse; and empty-cells: show; to the table level and IE will display borders around empty cells.
Tags: CSS
June 1st, 2008 at 11:59 pm
Thanks! I’ve been working on a legacy system with embedded tables for layout, and this one was driving me crazy! Everyone else was talking about how IE doesn’t support empty-cells, but you’re the first to give a workaround that really worked! Saved me a trip to the crazy house…
July 14th, 2008 at 6:30 pm
Excellent work with the fix mate, don’t we all just love IE.
This fix works a treat until you try to show up a complete row with nothing in it. Then I found setting an IE specific height on the cells is required.
table
{
border-collapse:collapse; and empty-cells: show;
}
table tr td{height: 1px; width: 1px; padding: 0px; _height: 1em;}
CSS is a bit lazy, should have the full IE hack if you care about CSS validation of course. And you will have to have a bit of a play with the padding / height to get the sizes exact, but using em should eventually sort your rows out as well..
Cheers and thanks for the initial post.
Invective.