Question

I’m tying to create a transition effect when moving between pages of data presented using an HTML table layout. Ideally I would like to use any of the regular jQuery UI transitions, however, it’s proving difficult.

That is, if I apply an effect to the entire table, everything is fine. However, I don’t want the header row to be affected, it should remain static, so this isn’t useful.

Applying the effect to the <tbody> tag results in unpredictable results — formatting gets screwed up in different ways during the transition.

I can apply effects simulatenously to all table rows instead of to a wrapper element – but this really only works well for effects that are uniform (like a simple fadeout/fadein).

I can make the header as a separate table, but it’s difficult to ensure that the columns align properly and therefore the layout must be completely fixed. This isn’t ideal either.

Are there any better ways to make this work better without separating the header from the table, or is this really the only way to do this with good results?

Answer 1

You didn’t post code to work from, so I can only give you directions. However, I’d suggest you try the following:

• Apply position: relative; to the table’s parent element (add one if needed),
• Duplicate the <table> element (without its descendants),
• Apply position: absolute; and an appropriate z-index to the new table, so it remains on top of the original,
• Deep-clone the header row and append() it to the new table,
• Append the new table to the parent element, so the new header row will mask the original one during the animation,
• Perform your animation on the original <table> element,
• remove() the new <table> element.