animate div width styled as table-cell

I've created 2 columns. The 2nd is 240px wide and the 1st takes all available width.

The below displays fine in IE8 & FF3.6:

/*My Styles*/
div.table { display:table; border-collapse: collapse; table-layout:fixed; width:100%; border-spacing:0; padding:0; margin:0;}
div.cell  { display:table-cell; overflow:hidden;vertical-align:top;}


<div class="table">    
        <div class="cell" style="width:100%">
            <div id="tblWFWrap" class="tblWrap">
                <div id="tblWF" style="overflow:hidden">
                    <!--Content-->
                </div>
            </div>
        </div>

        <div id="wfCol" class="cell" style="width:240px;">
            <div id="ulWF" class="tblWrap" style="width:240px">
                <!--Content-->
            </div>
        </div>        
</div>

The problem is that I wish to animate the width of the 2nd cell from 240px to 0. Both browsers fail to display the 2nd column during the animation. (It runs off the screen as if the table layout was auto instead of fixed)

I've been using jQuery 1.4 to do the animation thoug开发者_StackOverflow中文版h I'm open to a custom written Javascript implementation if this is a bug in jQuery.

My jQuery code is basically:

$("#wfCol").animate({ width: 0 });

I'd greatly appreciate any help animating this thing :)

---

I believe I've got a work around. For some reason animating maxWidth instead of width works.

So:

<div id="wfCol" class="cell" style="width:240px; max-width:240px">
        <div id="ulWF" class="tblWrap" style="width:240px">
            <%=DashboardController.GetWorkflowString()%>
        </div>
    </div>

and

$wfCol.animate({ maxWidth: 0 });

Works... Wierd but I'll take it :)

---

Just remove the 100% width delcaration, the <div> will expand to the width by default and not give the behavior you're talking about:

div.table { display:table; border-collapse: collapse; table-layout:fixed; border-spacing:0; padding:0; margin:0;}