<TR> Formatting not happening in Firefox

Question

Hi, 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

Answer 1

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

Answer 2

Try toggling between "none" and "".