261416 - repeatedly toggling style.display on <TR> incrementally increases horizontal space

Status: RESOLVED INVALID

(Firefox :: General, defect)

Description

[Troy Larson]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; rv:1.7.3) Gecko/20040913 Firefox/0.10
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; rv:1.7.3) Gecko/20040913 Firefox/0.10

Using the example code below, each time Row 2 is hidden, Row 3 is pushed down
further. The page works fine in Internet Explorer.

In addition, Row 2 is slightly indented. It should appear flush with Rows 1 and 3.

<script>
function toggle(idname)
{
    document.getElementById(idname).style.display =
(document.getElementById(idname).style.display == 'none') ? 'block' : 'none';
}
</script>
<A HREF="javascript:toggle('test')">Toggle Row 2</A>
<TABLE>
<TR><TD>Row1</TD></TR>
<TR id="test" style="display:none"><TD>Row2</TD></TR>
<TR><TD>Row3</TD></TR>
</TABLE>

Reproducible: Always
Steps to Reproduce:
1. Load the example code.
2. Click "Toggle Row 2" repeatedly (5-6 times).

Actual Results:  
Row 3 keeps getting pushed down.

Row 2 is slightly indented.

Expected Results:  
1. Row 3 should have moved back up to its previous position.
2. Row 2 should appear flush with rows 1 and 3.

Comment 1

[Bill Mason]

That's because the default value of a table row is "table-row", not "block".

Toggle between none and "" to get a result that works cross-browser, since IE
will not understand table-row.

Comment 2

[Antonio Carlos da Graça Mota Durão de Souza]

Attachment: TestCase. Try to switch many times

After hide/show increases blank spaces