Hiding a table row in Firefox

Giganews Newsgroups
Subject: Hiding a table row in Firefox
Posted by:  Patrick Nolan (p…@glast2.Stanford.EDU)
Date: Wed, 14 Oct 2009

There is an HTML table with two columns.  I would like to hide
or reveal a row by clicking a box.  I worked out a way to do it
which works for IE, but the result surprises me in Firefox.

The HTML for the row looks like this:
<tr id=foobar><td>data</td><td>Some text</td></tr>

The button which controls it looks like this:
<input type=button value="Flip the row" onClick="toggle('foobar');">

The function that does the work is
function toggle(element) {
  var el = document.getElementById(element);
  if (el.style.display == "none") el.style.display = "block";
  else el.style.display = "none";
}

On IE, the row just appears and disappears neatly when I
click the button.  On Firefox, the two <td> contents are
mashed together in the first column.

Here it is graphically:

With the column hidden:
stuff    stuff
stuff    stuff

With the column visible:
stuff          stuff
dataSome text
stuff          stuff

The expected result:
stuff    stuff
data    Some text
stuff    stuff

Replies