html - 将父 div 拉伸(stretch)到表格内容的宽度

Question

我正在尝试拉伸(stretch)一个 div 以匹配子表的宽度。目前，当浏览器窗口变窄时，表格宽度会超过其父 div。

http://jsfiddle.net/Ydu2K/

<div id="parentdiv" style="width: 100%; background-color: green;">
    Some text in div.
    <table style="background-color: red;">
        <tr>
            <td>aaaa</td>
            <td>aaaa</td>
            <td>aaaa</td>
            <td>aaaa</td>
            <td>aaaa</td>
            <td>aaaa</td>
            <td>aaaa</td>
            <td>aaaa</td>
            <td>aaaa</td>   
            <td>aaaa</td>   
            <td>aaaa</td>   
            <td>aaaa</td>   
            <td>aaaa</td>   
            <td>aaaa</td>
            <td>aaaa</td>
            <td>aaaa</td>
            <td>aaaa</td>
            <td>aaaa</td>
            <td>aaaa</td>
            <td>aaaa</td>
            <td>aaaa</td>
            <td>aaaa</td>
        </tr>
    </table>
</div>

Answer 1

#parentdiv {
    display: inline-block;
    /* width: 100%;  remove */
}

http://jsfiddle.net/Ydu2K/6/embedded/result/