How to move td content to another td at the same row across borders

Question

I'm trying to code an animation to push a td content (which is a div inside the td) to another td (to the end of the row) in the same tr across tds borders without changing the width of the td.

Is there a good way to do this? CSS / jQuery?

Answer 1

If it is animation you want (the first td content seems to "slide" into another td with an animation), I came up with this (hopefully I got your question right):

$div = $('td.first > div');
$div
    .css({position:'relative'})
    .animate({
        left:$('td.second').offset().left - $('td.first').offset().left
    }, {
        complete:function(){
            $div.appendTo('td.second');
            $div.css({position:'', left:''});
        }, 
        duration:1000
    });

So what does it do?

1. Set position of content to "relative". This way, we can move it relative to its original position.

2. animate it so that it goes exactly where it should be if it was inside td.second. We calculate the distance between cells with jquery's offset() function

3. At the end of the animation, we actually copy the div inside the second . Before that it was visually, but not actually in the other td.

4. We remove instantly the position and left css properties. Without this line the the div would be offset from its new position.

I did not test this and it could be optimized.