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:

table-row-display.png

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>

32 Comments:

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:45 PM, Blogger cc Infopage said...

Hello,

I am searching around for fresh information
for my cc Infopage.
This website contains 30,000 Information Pages about all kind of subjects.

I just wanted to let you know that I read your blog. I hope you enjoy "Blogging" as much as I do.

I wish you all the luck I can, keep the good work going!

Kind regards,
Jos
http://www.infopage.cc

Today's Tip: Visit cc Infopage about google

 
At 1:20 PM, Blogger Work From Home Center said...

Hi Thanks for your interesting blog. I also have a blog/site, covering starting a home based business
related stuff. Feel free to visit my starting a home based business
site.

 
At 6:35 PM, Blogger Swingin80 said...

Cool blog you have. I have a free work at home program related site. Check it out if you get a chance. The URL is free work at home program

 
At 6:58 PM, Blogger clicking4man said...

I enjoyed reading your blog. There is a lot of useful information about search engines in it. We offer Turnkey Websites and Reliable Hosting. We also provide a blogging service that will help your site get indexed fast and keep the search engines visiting your site. Click here for more information about search engines.
Thank you
TWP Admin

 
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 11:32 PM, Blogger rokkgod said...

I love this blog you got here. I run a movie review website and need people to do movie reviews.Movie Reviews. Thanks...sorry to be self promoting..at least you get some fresh text content.

 
At 5:50 PM, Blogger surveys-3958F8 said...

I was searching for work from home and came across your post. It wasn't exactly what i was looking for but was an excellent read nonetheless.

I wanted to also share with you and your readers a great site that offers consumers the opportunity to earn up to $150/hr by taking online surveys and trying new products. Im sure you and your readers will love this great site.

You can check it out at Paid Surveys

 
At 8:04 PM, Blogger betterlovemaking said...

I enjoyed reading your blog. There is a lot of useful information about blogging service in it. We offer Turnkey Websites and Reliable Hosting. We also provide a blogging service that will help your site get indexed fast and keep the search engines visiting your site. Click here for more information about blogging service.
Thank you
TWP Admin

 
At 3:51 AM, Blogger HiiFii Webservices said...

Welcome to earn123.
What are the world's Best affiliate Programs.
How to Get Free Traffic to your Website.
How to Earn Money at Home from Internet.

Learn to earn 90000$/Month
Here
For which you may also see my Personal Website
Here.
and for a Personal Education Career Tools
free Study Database.
This site is for seeing the
Hifi Electronics.
And this is for
World Class Gadgets

 
At 6:23 AM, Blogger Mr. 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?

Thanks
Marcello

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

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

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

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

style="table-row";
if (navigator.appName == "Microsoft Internet Explorer") {
style="block";
}

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

 
At 10:27 PM, Blogger Tug 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.

-Easton
BestLoan Inc

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

perfect! exactly what i was looking for! thanx

 
At 2:18 PM, Blogger satxxkenn said...

Cool blog - Check out my site if you need help finding a good low interest credit card. Credit Cards

 
At 7:35 AM, Blogger ktjrdn said...

thanks. I neded this

 
At 9:16 PM, Blogger Marco tAn said...

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

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

This helped a lot. Thanks!

 
At 1:38 AM, Blogger Hans 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