Table rows...revealed!

By setting the CSS rule display:none on a TR element, you can collapse and hide whole rows of table data from the user. This is a popular technique for managing the visual display of tabular data in a web application.

However, there's a small challenge that arises when we attempt to make the TR visible. The intuitive thing to try is to set the CSS display property to block. IE is perfectly happy with this, but Firefox 0.8 mangles the final rendering, as this screenshot shows:

The proper CSS rule should be display:table-row. Firefox like this a lot better and expands the TR without the mangling. But IE for Windows will throw an error, because — unlike its MacIE cousin — it doesn't support table-row.

What to do? Aside from waiting for IE to support table-row or for Firefox to support block in place of it, the simple solution is to set the CSS display property to an empty string. Both Firefox and IE should fall back on their respective default values.

Try this example:

<script type="text/javascript">
function applyDisplay(value)
{
 document.getElementById("foo").style.display = value;
}
</script>

<table border="1">
<tr><td>R1 C1</td><td>R1 C2</td><td>R1 C3</td></tr>
<tr><td>R2 C1</td><td>R2 C2</td><td>R2 C3</td></tr>
<tr id="foo"><td>R3 C1</td><td>R3 C2</td><td>R3 C3</td></tr>
</table>

<p>
<a href="#" 
   onclick="applyDisplay('none'); return false;">
   Apply "display:none" to Row 3
</a><br>
<a href="#" 
   onclick="applyDisplay('block'); return false;">
   Apply "display:block" to Row 3
</a> (error in IE)<br>
<a href="#" 
   onclick="applyDisplay('table-row'); return false;">
   Apply "display:table-row" to Row 3
</a> (mangled display in Firefox)<br>
<a href="#" 
   onclick="applyDisplay(''); return false;">
   Apply "display:" to Row 3
</a> (should work in both)
</p>