Thursday, July 22, 2004

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;

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

<a href="#" 
   onclick="applyDisplay('none'); return false;">
   Apply "display:none" to Row 3
<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)


At 4:18 PM, Blogger Jake said...

Fun in Firefox: Alternate between block and table-row...

Table height grows?! Phantom rows?
Block leaves residue.

At 4:25 PM, Blogger Jake said...

Also, I believe you have your parenthetical behaviors switched for block and table-row in the example code. (FYI)

At 8:57 PM, Blogger John said...

Yes, I discovered this too when using the display:none trick to page through hundreds of result rows. I use hiden columns (using class="something") as a way of keeping associated hidden variables. Tables are neat.

At 10:20 AM, Blogger Andrew said...

rather than using display: block
which causes erratic behavior on this (display:table-row) and inline elements (display:inline).

set display = '';

At 10:20 AM, Blogger Andrew said...

it works on both IE and FF for all elements.

At 10:11 PM, Blogger Chuck Reynolds said...

credit card repair MyOpp is the first portal to activate a complete portfolio of income streams with one click!credit card repair

At 6:23 AM, Blogger Mr. Fletcher said...

I tried the alternative script that you proposed, but it doesn't work on IE nor on Firefox 1.5.

Is there something wrong with new versions? Any other possible solution?


At 4:26 AM, Blogger marie@ said...

i really would like to thank andrew because of his fabulous answer...

display :'';

it works so funny

! :)

At 12:28 AM, Blogger SampahMan said...

Thanks for the solution! Was gonna pull my hair out.

At 9:40 AM, Blogger Bhagyesh Trivedi (bhagyesht) said...

Thanks, this solved 2 problems for me. my 1 cent... :D

At 1:18 PM, Blogger Unknown said...

This does NOT work if the table rows are "display:none" at load. in that case, you need a browser detect like:

if (navigator.appName == "Microsoft Internet Explorer") {

PS, could you delete the spam in the comments section?

At 10:27 PM, Blogger Rodrigo said...

Though the post is old, I needed (and found) your solution, which fits my needs :)
Thank you!

At 1:07 AM, Blogger Easton said...

I have been looking for this script for a while, thank GOD. I got it here. Your blog has been so much informational for people like me.

BestLoan Inc

At 5:47 AM, Blogger Ronny said...

perfect! exactly what i was looking for! thanx

At 7:35 AM, Blogger Katie Swaner said...

thanks. I neded this

At 9:16 PM, Blogger Tan Y.J. Marco said...

try {
document.getElementById('trABC').style.display = 'table-row';
catch(iestupidproblem) {
document.getElementById('trABC').style.display = 'block';

At 6:18 PM, Blogger Unknown said...

This helped a lot. Thanks!

At 1:38 AM, Blogger Unknown said...

display:table-row works great! thanks a lot!

At 12:25 PM, Blogger DJ Anderson Schmitt said...

You saved me!! Thanks! :D


Post a Comment

<< Home