Make fade effects work on tables

[steven@…]

Effects don't work on tables, because in CSS2-compatible browsers, table elements have "display: table" "display: table-row" and "display: table-cell". Trying to apply revealing effects will end up setting "display: block", and destroying the table layout.

The following patch tries to fix this by setting the right display style based on the element's HTML tag. Fade effects work on table and td, but not on tr. Show/hide should probably work as well.

Doing size-dependant effects will probably not work well though, as you can't just isolate table elements with position: absolute to measure them. Still, it's a start.

http://acko.net/dumpx/jquery-table.patch

[laurenty@…]

Keep in mind that IE doesn't support the table display properties table-row, table-cell, etc... And I don't know if that was fixed in IE7

[john]

I think this can be resolved by simply not tampering with style.display when only opacity is being animated. (For right now, let's only worry about fadeIn and fadeOut - show/hide are much much harder)

[brandon]

I've adapted the patch a little to work with fadeOut and fadeIn.

http://brandon.jquery.com/testing/24/

Apparently Safari and Opera do not support setting opacity for elements with display: table-row. This means that fading TR elements will not work properly in Safari and Opera. So far table, td and th are working fine in all browsers.

Opinions? The relevant lines are around 5113.

[sam]

Until this is patched (in stable, not SVN), the workaround I have used is to wrap the table in a div and do the effect on that.

$("#mytable").wrap("<div>");
$("#tablefade").click(
	function()
	{
		$("#mytable").parent().fadeOut("slow");
	}
);

[brandon]

Sam, I think your workaround might best approach to take. Browsers just act weird with these tables. Just, not messing with display or actually trying to use the appropriate display property will not work cross browser.

[mathieuma@…]

The issue is the same with toggle and show / hide.

The div warpping issue is nice when working on a complete table, but what do you do when you want to work on a cell or a row ?

[carlof]

Wrapping the selected tr:

$("tr#id").prependTo('<div class="foo"></div>');
$("div.foo").fadeOut("slow");

the fade out effect behaves like hide, but the speed paramater is ignored.

[GoodIsh]

I just threw this in where ever I was toggling a table:

$("table:visible").css("display","table");

Hopefully a fix will come for this to get back the old display value instead of changing it to block, but this hack works fine for now.

[john]

This should be fixed in SVN rev [1531]. You can now do fade animations on table cells.

[Web Development]

Nice coded information.

• Web Designing Development * SEO Services * Free Website Builder * Web Development India * Website SEO Optimization * Web Design Services * PPC