Question

I’ve got a table with 100% width and three cells.

When I press a button, one cell is hidden, and the table layout adjusts accordingly.

I am currently using the .hide() jquery method to animate the hiding.

HTML

<table style="border-color:red;width:100%">
    <tr>
        <td>
            <table><tr><td><div>stuff 1 blah blah blah</div></td></tr></table>
        </td>
        <td>
            <table><tr><td><div>stuff 2 blah blah blah</div></td></tr></table>
        </td>
        <td id="tdStuff"> 
             <table><tr><td><div>stuff 3 blah blah blah</div></td></tr></table>           
        </td>
    </tr>
</table>
<button id="btnHide" onclick="hideStuff()" >Hide</button>

Javascript/jQuery

function hideStuff(){
    $('#tdStuff').hide('slow');
}

But the problem is that even though it adjusts smoothly at first, the text in the cell gets squashed up. And, if there is a fixed width anywhere, it stops adjusting and simply jumps.

Is there a way I can get the animation to happen smoothly by expanding the remaining cells in the row to fit the width of the table.

Relevant jsfiddle

Answer 1

Yes, jQuery has functionality for this, try the following adjustment:

$('#tdStuff3').hide('slow');

See the documentation on hide for more information.