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>

这会产生以下输出：

alt text

表格没有填写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

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

在这种情况下，您的问题是<div>上的5px填充，导致<div>比其他情况下的100％大10px（10px，因为它增加了5px侧）。

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

为<table>提供与<div>
将填充放在外部<div>
更改<div>上的填充仅适用于顶部和底部，左右填充零（padding:5px 0或填充顶部：5px;填充底部：5px;`）。
将<div>置于另一个<div>内，并设置两个width:100%中的外部padding:5px;和内部<div>

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

另外，请记住默认情况下width:100%是全宽，因此您根本不需要div上的{{1}}。事实上，删除它甚至可以解决问题本身，因为div适合其周围环境，因此可以考虑填充。

Answer 3

这里要做的事情可能是使用表头（thead）而不是div然后你根本不需要填充填充。这也有助于SEO，并且页面更清晰。

<div style="width:100%; margin-top:20px;">
<table width="100%" border="0" cellspacing="0" cellpadding="5" style="border:1px solid #aaa;">
    <thead>
        <tr style="background:#ccc; font-weight:900;">
            <th>Table Top</th>
        </tr>
    </thead>
    <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 4

Cellpadding =“5”是造成差异的原因。

宽度表100％未填充父<div> </div>

4 个答案: