253120 - "display:none" on table row does not collapse other rows

Status: RESOLVED DUPLICATE of bug 97506

(Firefox :: General, defect)

Description

[jeff]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7) Gecko/20040707 Firefox/0.9.2
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7) Gecko/20040707 Firefox/0.9.2

using javascript to change css display property of a <tr> to "none" does not
collapse surrounding rows, and multiple attempts keep expanding the affected
row's height

(note: not sure if this is a bug or perhaps you're just not allowed to change
"display" on a <tr>?)


Reproducible: Always
Steps to Reproduce:
1. run the attached test page
2. click "toggle" button a few times

Actual Results:  
the middle <tr> grows in height

Expected Results:  
the middle <tr> should expand/contract upon each click

<html>
  <head>    
    <title>test</title>
    <script type="text/javascript">
      function toggle() {
        var row = document.getElementById("row");
        row.className = (row.className == "visible") ? "hidden" : "visible";
      }
    </script>

    <style type="text/css">
      table, td {
        border:1px solid buttonface;
        border-collapse:collapse;
      }
      .visible { display:block; }
      .hidden { display:none; }
    </style>
  </head>
  <body>
    <input type="button" value="toggle" onclick="toggle();" />
    <table>
      <tr>
        <td>data</td>
      </tr>
      <tr id="row" class="visible">
        <td> * data * </td>
      </tr>
      <tr>
        <td>data</td>
      </tr>
    </table>
  </body>
</html>

Comment 1

[jeff]

Attachment: test case

Comment 2

[Bill Mason]

This happens because the default display value of a TR is table-row, not block.

Toggle between none and "" to get an effect that works cross-browser (since IE
understands block but not table-row).



*** This bug has been marked as a duplicate of 97506 ***