宽度表100%未填充父<div>

Question

宽度为100%的表格未填充其父div.

示例html:

<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.可能是什么问题呢？

Answer 1

标题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>

Answer 2

这是一个表格更容易风格的神话 - 它们在某些方面更容易,但它们有很多自己的怪癖.您正在使用它们,因为您正在显示表格数据,所以不要让任何人告诉您不要使用它们.此外,该表确实与此处的问题无关.

在这种情况下,你的问题是5px填充,<div>这导致<div>比其他情况下的100%大10px(10px,因为它有5px添加到任何一方).

解决方案:(以下任何一项都将为您解决问题)

• 给你<table>相同的填充<div>
• 将衬垫放在外面 <div>
• 更改上的填充<div>仅适用于顶部和底部,左右填充零填充(padding:5px 0或填充顶部:5px;填充底部:5px;`).
• 把<div>内部放在另一个内部,<div>然后设置两者的外部width:100%和内部的一个padding:5px;

如果我必须选择其中一个,我会选择padding-top/padding-bottom选项,但它们应该都适合你; 这取决于你想要它的样子.

另外,请记住<div>默认情况下s是全宽,所以你根本不需要width:100%你的div.事实上,删除它甚至可以解决问题本身,因为div将适合其周围环境,因此可以考虑填充.