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.


30 thoughts on “Show Empty Table Cells with CSS in Internet Explorer”

  1. Kevin says:

    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…

  2. Invective says:

    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.

    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.


  3. toolshed says:

    This piece just saved my life. Thanks bro’

  4. Jeffrey says:

    Thx alot! It was verry usefull!

  5. Copper says:

    10x verry much. this was verry useful to me, saved me a lot of work

  6. Joe says:

    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.

  7. Kxtells says:


    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

  8. Sunaina says:

    Thanks for this tip! It made my day!

  9. Hemanth says:

    Thanks a lot. That really helped!

  10. Marco E. says:

    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

  11. Vidhi says:

    Simple   in the of the table would also solve the purpose.

  12. acl68 says:

    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!

  13. Excellent!! what a combination of styles!!!

  14. Prashant says:

    This soln really was awesome! Thx u so much.

  15. Nagaraju says:

    Thanks dude. Its working fine

  16. aaa says:

    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?

  17. aaa says:

    Oh, I don’t want   inside because it should not have any initial value.

  18. aaa says:

    My last post said & n b s p ; It was translated into HTML. Sorry.

  19. rpavlov says:

    Excellent hack, thanks. Now if only there was a way to maintain gaps between cell borders…

  20. Hi thanks for the post helped me fix a lot of stuff

  21. Puppet Tony says:

    thank you so much
    i am looking for this for my project.
    due date is stressing me~~

  22. marck says:

    Thank you very much…just finished bashing Internet Explorer on another forum looking for this answer. Truly appreciated.

  23. Eye Bridge says:

    nice tip. thanks

  24. dilbert2 says:

    you rock!

  25. Kamlesh Gurav says:

    Thanks Bro. It save my day.

  26. funky says:

    thanks fro the hint!

  27. MAHESH says:

    This is very helpful to me !!! THAN YOU SO MUCH…

  28. unlucky says:

    too good to be true. with IE 10 doesn’t work.

  29. raj says:

    Thank You………………

Comments are closed.