给出这个例子(
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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。