html – 在div中包含表

发布时间:2020-01-14 发布网站:脚本之家
脚本之家收集整理的这篇文章主要介绍了html – 在div中包含表脚本之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
给出这个例子( 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>

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

总结

以上是脚本之家为你收集整理的html – 在div中包含表全部内容,希望文章能够帮你解决html – 在div中包含表所遇到的程序开发问题。

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:76874919,请注明来意。

脚本之家官方公众号

微信公众号搜索 “ 程序精选 ” ,选择关注!

微信公众号搜索 “ 程序精选 ” ,选择关注!
精选程序员所需精品干货内容!

标签: