Workaround for IE6 Empty-Cells CSS Support

Contributor Icon Contributed by davak Date Icon November 11, 2008  
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

Previous recipe | Next recipe |
 
  • anon
    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.
  • ...or you simply use the old Google trick, set an empty image tag into an empty cell as in
    <img ALT="" height=1 width=1>
    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....
  • its not a complete solution :)
  • stymiee
    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  . 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.
  • Neocompo
    Works perfectly well. Thank you for this hint.
  • bibiainikkara
    thanks 4 da advice
blog comments powered by Disqus