jquery - jQueryは親要素と一緒に横にスライドします

Question

以前にも同様の質問があったことは知っていますが、要素がスライドするにつれて親のサイズが大きくなることを望んでいます。jQueryUIを含む多くのトリックを試しました。

これは私がこれまでに得たものです：http：//jsfiddle.net/U8z49/25/

html：

<table class="t">
    <tr>
        <td class="l">
            <div>Click me.<br /><br />This div has fixed width of 100px and is taller than the right stuff.</div>
        </td>
        <td class="r">
            <div class="rdiv">I would like this cell or div to slide in from left to right and to cause the parent table and its background to grow along with it. Currently the table first snaps to 100% width, and then the content (the div) slides in.</div>
        </td>
    </tr>
</table>

css：

.t { background: #ddd; border-radius: 10px; width: auto; }
.l div { width: 120px; margin: 1em; text-align: right; }
.rdiv { padding: 1em; border-left: 1px solid #bbb; display: none; }

js：

$('.l').click(function(){$('.rdiv').show("slide", {direction:"left"}, 500);});

ご覧のとおり、私の問題は、親が最初に100％の幅にスナップし、その後に子がスライドインすることです。

psテーブルとセルを選択したのは、左側の幅を固定し、右側のスペースをテーブルの保持要素の幅の100％まで拡張する必要があるためです（実際の設定はより複雑ですが、これが要点です）。