html – 宽度表100%不填充父级

我认为桌子比较容易做饭,但是这个打起了我的头.问题是宽度100%的表不填充它的父div.
<div style="width:100%; margin-top:20px;">
    <div style="width:100%; padding:5px; background:#ccc; font-weight:900;">Table Top</div>
    <table width="100%" border="0" cellspacing="0" cellpadding="5" style="border:1px solid #aaa;">
        <tr style="background:#eee;">
            <td>&nbsp;</td>
            <td><strong>L</strong></td>
            <td><strong>B</strong></td>
            <td><strong>H</strong></td>
            <td><strong>W</strong></td>
        </tr>
        <tr style="background:#fafafa;">
            <td style="border:1px solid #ccc; border-width:1px 1px 0 0;">
                Unit 1
            </td>
            <td style="border:1px solid #ccc; border-width:1px 1px 0 0;">
                550 mm
            </td>
            <td style="border:1px solid #ccc; border-width:1px 1px 0 0;">
                550 mm
            </td>
            <td style="border:1px solid #ccc; border-width:1px 1px 0 0;">
                25 mm
            </td>
            <td style="border:1px solid #ccc; border-width:1px 0 0 0;">
                60.00 kg
            </td>
        </tr>
    </table>
</div>

输出是这样的:

桌子没有填满div.可能是什么问题呢?
感谢任何帮助.

解决方法

标题div的宽度为100%,填充为5px,使其扩展到其极限.
为什么不使用表的整体呢?

这是一个工作版本:

<div style="width:100%; margin-top:20px;">
<div style="width:100%; background:#ccc; font-weight:900;"><div style="padding:5px;">Table Top</div></div>
<table width="100%" border="0" cellspacing="0" cellpadding="5" style="border:1px solid #aaa;">
    <tr style="background:#eee;">
        <td>&nbsp;</td>
        <td><strong>L</strong></td>
        <td><strong>B</strong></td>
        <td><strong>H</strong></td>
        <td><strong>W</strong></td>
    </tr>
    <tr style="background:#fafafa;">
        <td style="border:1px solid #ccc; border-width:1px 1px 0 0;">
            Unit 1
        </td>
        <td style="border:1px solid #ccc; border-width:1px 1px 0 0;">
            550 mm
        </td>
        <td style="border:1px solid #ccc; border-width:1px 1px 0 0;">
            550 mm
        </td>
        <td style="border:1px solid #ccc; border-width:1px 1px 0 0;">
            25 mm
        </td>
        <td style="border:1px solid #ccc; border-width:1px 0 0 0;">
            60.00 kg
        </td>
    </tr>
</table>

相关文章

vue阻止冒泡事件 阻止点击事件的执行 &lt;div @click=&a...
尝试过使用网友说的API接口获取 找到的都是失效了 暂时就使用...
后台我拿的数据是这样的格式: [ {id:1 , parentId: 0, name:...
JAVA下载文件防重复点击,防止多次下载请求,Cookie方式快速简...
Mip是什么意思以及作用有哪些