Workaround for IE6 Empty-Cells CSS Support

   Posted November 11, 2008 by David Kirk in 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

 

About David Kirk

David Kirk is one of the original founders of tech-recipes and is currently serving as editor-in-chief. Not only has he been crafting tutorials for over ten years, but in his other life he also enjoys taking care of critically ill patients as an ICU physician.
View more articles by David Kirk

The Conversation

Follow the reactions below and share your own thoughts.