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 5:49 AM, Blogger LetterJ said...

Setting to an empty string works in both as long as you don't have any other sort of styling on the element. While this isn't as big of a problem with the style attribute as it is with className, what I do is have an "add" and a "remove" function in all of my code. The add_css_class() takes the current className entry, figures out if it's already empty or not, either adds the appropriate value or appends it with a space. The remove_css_class() function does the reverse. That way you're only removing exactly what you want and keep things clean and avoid unexpected results.

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 2:28 PM, Blogger QueenMeltifa said...

Hello I came across your blog. I think it is really informational. The blog is sweet and I am glad I found it. I am trying to get a blog going myself. If you do not mind I added it to my favorites and would love to come back and periodically check in. I started a website and I am trying to get a blog off the ground like yours. It is about voice over ip. You can see it here: Voip Phone Services
The blog is on the left navi panel. Anyways. Have a good day and once again very cool blog.
I thought I was technical geek. You guys take the cake :-)

At 1:02 PM, Blogger QueenMeltifa said...

Could use some programming help here!
Credit Card Company

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 3:11 AM, Blogger Joy-hgf675 said...

I tried your example code!

It works GREAT. Thanks for the info!

Wonderful blog, really worth the visit. Keep up the good work. I just came to this blog through search engine while having a break from my current project Credit Cards - Information Portal. Though your blog is not exactly straight related to my current project. I glad i have a visit today. I too wish to come back and participate in the comment section. So i clearly book marked your blog. See you later.

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