Solution to “display:table-row” causing pain and suffering with IE

I recently came up against a situation where I wanted to add rows to a table via javascript.

Not a problem with jQuery, EXCEPT that my table rows were being added with ‘style=”display:block”‘.

What’s wrong with that, you ask? Well, in Firefox the row was being appended to the table but it looked all scrunched into the first cell like so:


OK, fine. Let’s give it a display property of “table-row.” That should work, right? Yes, it works here but not in IE. IE hates this, in fact. IE wants to get a display of “block.”

The solution turns out to be to set the display value to an empty string. Then, each browser will give the row its default value and everyone is happy.