Bug Tracker

Opened 11 years ago

Closed 10 years ago

#24 closed bug (fixed)

Make fade effects work on tables

Reported by: steven@… Owned by:
Priority: major Milestone: 1.1.3
Component: effects Version: 1.1.2
Keywords: Cc:
Blocked by: Blocking:


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.


Change History (12)

comment:1 Changed 11 years ago by john

  • Component changed from core to fx
  • Milestone set to 1.0
  • Version set to 1.0

comment:2 Changed 11 years ago by john

  • Milestone 1.0 deleted
  • Version 1.0 deleted

comment:3 Changed 10 years ago by 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

comment:4 Changed 10 years ago by john

  • Milestone set to 1.1
  • Summary changed from Make show/hide and fade effects work on tables to Make fade effects work on tables
  • Type changed from enhancement to bug
  • Version set to 1.1

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)

comment:5 Changed 10 years ago by brandon

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


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.

comment:6 Changed 10 years ago by 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.


comment:7 Changed 10 years ago by 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.

comment:8 Changed 10 years ago by joern

  • Milestone 1.1 deleted
  • Version 1.1 deleted

comment:9 Changed 10 years ago by 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 ?

comment:10 Changed 10 years ago by carlof

Wrapping the selected tr:

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

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

comment:11 Changed 10 years ago by GoodIsh

I just threw this in where ever I was toggling a 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.

comment:12 Changed 10 years ago by john

  • Milestone set to 1.1.3
  • Resolution set to fixed
  • Status changed from new to closed
  • Version set to 1.1.2

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

Note: See TracTickets for help on using tickets.