代码之家 › 专栏 › 技术社区 › Matt Mitchell

在DIV中包含表

css html

Matt Mitchell · 技术社区 · 14 年前

举个例子( http://jsfiddle.net/A8gHg/ ,代码也在下面),尝试将窗口变小,以便压扁示例的大小。

<div style="background-color:blue">
    <table style="width:100%">
        <tr>
            <td>
                <input type="text" style="width:150px"/>
            </td>
            <td>
                <input type="text" style="width:150px"/>
            </td>
            <td>
                <input type="text" style="width:150px"/>
            </td>
            <td>
                <input type="text" style="width:150px"/>
            </td>
            <td>
                <input type="text" style="width:150px"/>
            </td>
        </tr>
    </table>
</div>

请注意,文本框(正确)不会换行,因为它们是单独的。 <td> S.

但是,包含 div 如蓝色所示,不能完全包住桌子。

我怎么做这个容器 div 完全包含子级 table ?

1 回复 | 直到 7 年前

Michael Robinson 14 年前

编辑:

添加 display:table 到包装区。

<div style="background-color:blue;padding:5px;display:table;">
    <table style="margin:5px;">
        <tr>
            <td>
                <input type="text" style="width:150px"/>
            </td>
            <td>
                <input type="text" style="width:150px"/>
            </td>
            <td>
                <input type="text" style="width:150px"/>
            </td>
            <td>
                <input type="text" style="width:150px"/>
            </td>
            <td>
                <input type="text" style="width:150px"/>
            </td>
        </tr>
    </table>
</div>

http://jsfiddle.net/A8gHg/11/