Ширина живого элемента в стиле таблицы

Question

Я создал 2 столбца. 2-й имеет ширину 240 пикселей, а 1-й занимает всю доступную ширину.

В 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>

Проблема в том, что я хочу анимировать ширину 2-й ячейки от 240 до 0. Оба браузера не отображают 2-й столбец во время анимации. (Он выходит за пределы экрана, как если бы макет таблицы был автоматическим, а не фиксированным)

Я использовал jQuery 1.4 для создания анимации, хотя я открыт для пользовательской реализации Javascript, если это ошибка в jQuery.

Мой код jQuery в основном:

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

Я был бы очень признателен за любую помощь в анимации этой вещи:)

Answer 1

Мне кажется, у меня есть работа. По некоторым причинам анимация maxWidth вместо ширины работает.

Итак:

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

и

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

Работает ... Странно но я возьму :) 1009 *

Answer 2

Просто удалите деление ширины 100%, <div> по умолчанию расширится до ширины и не даст поведения, о котором вы говорите:

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