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
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…
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.
This piece just saved my life. Thanks bro’
Thx alot! It was verry usefull!
10x verry much. this was verry useful to me, saved me a lot of work
Erm, this is neither a fix nor a solution for the problem itself. Since you just collapse the borders of each cell with its neighbor cell you will face the same problems in various (common) cases.
1st: Two neighboring cells are empty, then there will be no border between them, cause there is nothing to collapse.
2nd: You just don’t want collapsed cells.
Fantastic!
It’s not exactly what I wanted (I prefer to keep the cells separated)
but border-collapse: separate does not work
anyway, better something than nothing
Thanks for this tip! It made my day!
Thanks a lot. That really helped!
So simple – And I am so happy – Thanks! – took me one hour before I ended up with someone who had the simple solution on a simple question –
Perfect! thanks a lot for sharing
Simple in the of the table would also solve the purpose.
Thanks a lot! I had the solution with first, but that gave me trouble when someone wants to copy & paste the values to Excel for further calculating. So this changed my layout a bit, but it works. Hurray!
Excellent!! what a combination of styles!!!
This soln really was awesome! Thx u so much.
Thanks dude. Its working fine
Good article!
What about a whole empty row without anything in its cells?
It looks like only one solid line in IE7 even you have many empty rows.
Do you know how to fix it?
Oh, I don’t want inside because it should not have any initial value.
My last post said & n b s p ; It was translated into HTML. Sorry.
Excellent hack, thanks. Now if only there was a way to maintain gaps between cell borders…
Hi thanks for the post helped me fix a lot of stuff
thank you so much
i am looking for this for my project.
due date is stressing me~~
Thank you very much…just finished bashing Internet Explorer on another forum looking for this answer. Truly appreciated.
nice tip. thanks
you rock!
Thanks Bro. It save my day.
thanks fro the hint!
This is very helpful to me !!! THAN YOU SO MUCH…
too good to be true. with IE 10 doesn’t work.
Thank You………………