Html 在 div 中包含表格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3508755/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Contain table within div
提问by Matt Mitchell
Given this example (http://jsfiddle.net/A8gHg/, code also below), try making your window smaller such that the size of the example is squished.
给定这个例子（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>
You will note that the textboxes (correctly) do not wrap to new lines as they are in individual <td>s.
您会注意到文本框（正确地）不会像它们在单个<td>s 中那样换行到新行。
However, the containing div, as denoted by the blue colour, does not completely wrap the table.
但是，包含div，如蓝色所示，并没有完全包裹桌子。
How can I make the containing divfully contain the child table?
我怎样才能让包含div完全包含孩子table？
回答by Michael Robinson
Edit:
编辑：
Add display:tableto the wrapping 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>
