给出这个例子(
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>中.
但是,由蓝色表示的包含div并不完全包装表.
如何使包含的div完全包含子表？
谢谢.
解决方法
编辑：
将display:table添加到包装div.
<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>
