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>
23 Comments:
Fun in Firefox: Alternate between block and table-row...
Table height grows?! Phantom rows?
Block leaves residue.
Also, I believe you have your parenthetical behaviors switched for block and table-row in the example code. (FYI)
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.
rather than using display: block
which causes erratic behavior on this (display:table-row) and inline elements (display:inline).
set display = '';
it works on both IE and FF for all elements.
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.
credit card repair MyOpp is the first portal to activate a complete portfolio of income streams with one click!credit card repair
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
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 :-)
Could use some programming help here!
Credit Card Company
i really would like to thank andrew because of his fabulous answer...
display :'';
it works so funny
! :)
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.
Thanks for the solution! Was gonna pull my hair out.
Thanks, this solved 2 problems for me. my 1 cent... :D
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?
Though the post is old, I needed (and found) your solution, which fits my needs :)
Thank you!
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
perfect! exactly what i was looking for! thanx
thanks. I neded this
try {
document.getElementById('trABC').style.display = 'table-row';
}
catch(iestupidproblem) {
document.getElementById('trABC').style.display = 'block';
}
This helped a lot. Thanks!
display:table-row works great! thanks a lot!
You saved me!! Thanks! :D
Post a Comment
<< Home