<TR> Formatting not happening in Firefox

I want to hide/unhide a group of HTML Table rows using javascript. To do so, I define each such row, whose visibility is to be toggled, as follows: When an appropriate event is fired, I toggle its state as follows:

document.getElementById('rowId1').style.display = 开发者_运维技巧'none';//or 'block'

The above code works in both firefox and IE. But while IE retains proper shape of the table, firefox loses all sense of decorum and the HTML table displayed is totally haphazard.

Am I missing out anything important? I have ensured that the CSSClass of the individual elements are defined in the CSS file.

Regards, Vipul

Don't use display: block for table elements on firefox.

Use display: table-row for rows instead.

Sadly, IE (up to 8) does not support this standard.

More on the issue here: http://www.w3schools.com/css/pr_class_display.asp

Try toggling between "none" and "".