Workaround for IE6 Empty-Cells CSS Support

Contributor Icon Contributed by David Kirk     
Tag Icon Tagged: Browsers  

The empty-cells property in css establishes if the browser should or should not create borders around empty cells in tables. Internet Explorer 6 was thought to not support this property. However, if you align the CSS moons in the perfect direction, IE6 actually does recognize the empty-cells property. Here is how to do it.

Crafting CSS for IE is the one of most painful parts of a designer’s work. Sadly, a lot of big companies still use IE; thus, IE6 fixes and hacks are still required.

Currently, I am designing an application for our hospital (which still uses IE6 only). The program contains a lot of data in tables and the lack of empty-cells css support looked horrible. Here is an example of the borders not appearing around empty cells.

ie6 empty-cells not supported

To workaround this problem, you must set the CSS border-collapse property of the table to collapse in your CSS as well. After this, IE6 will correctly render the empty-cells property on your TDs. Here is the most basic CSS example:


.sampletable {
border-collapse: collapse;}
.sampleTD {
empty-cells: show;}

Here is a screenshot of this method in action:

borders rendering in ie6 tables after workaround

 

9 Comments -


  1. anon said on November 13, 2008

    I feel your pain.

    Unfortunately, this appears to simply collapse borders rather than forcing IE to actually respect the empty-cells style. You can simply remove the empty-cells style and this renders the same. Well, it does for me anyhow.

  2. Rudolf said on December 16, 2008

    …or you simply use the old Google trick, set an empty image tag into an empty cell as in

    not valid HTML according to W3C, but it is a solid thing that works just as well as the even older “spacer.gif”, a small few pixels of a totally transparent image as can be done in Paint Shop Pro….

  3. Viktor said on April 21, 2009

    its not a complete solution :)

  4. Anonymous said on May 4, 2009

    This solution is about as good as you can get. The best alternative (which is better then putting an empty image in the cell which is just really bad code and invalid anyways) is to put a blank space either as a literal blank space or using &nbsp. But this way is ideal as you can use CSS to apply it across all tables and table cells with very little code and you don’t have to clutter up your HTML with unnecessary code or characters.

    This solution can be considered complete and corporate ready.

  5. Anonymous said on July 16, 2009

    Works perfectly well. Thank you for this hint.

  6. Anonymous said on September 17, 2009

    thanks 4 da advice

  7. Sofox said on January 27, 2010

    Lifesaver you are.
    Thank you very much

  8. brest said on February 1, 2011

    not really useful as it changes the look of the table…but good try

  9. Mumu said on April 15, 2011

    not working on IE8

 

RSS feed for comments on this post. TrackBack URL

Leave a comment -