Applying addClass and css jQuery methods to table elements in IE7
Facts - HTML and Javascript
Thursday, 27 August 2009 19:10

This article is for Internet Explorer 7 (IE7) and jQuery 1.3.2.

When applying the jQuery methods addClass and css to a number of table elements (td) the effect will only be visible in IE7 if the contents of the element are not empty.

What I wanted to do was first setting a style on a number of table elements from javascript and then set their contents, also from javascript. The style was a custom border.

I tested first without setting the contents from javascript, leaving the table elements empty. In FireFox 3.5 the css properties of the table elements became visible, but not in IE7, neither with the addClass method, nor with the css method. It only worked in IE7 after I had set the contents of the table elements to " ", such that they were not empty anymore.

I found this after setting "border:1" on the whole table. It turned out that the empty table elements were not displayed in IE7. So my conclusion was that by making all table elements non-empty they would be displayed in IE7, together with their css properties.

So IE7 does not display empty table elements, not even if you have set css properties on them. If I had postponed my testing until after setting the contents with javascript I would not have noticed this strange IE7 behavior. Making the table elements non-empty from javascript is just as good as manually populating their HTML contents with " ".