Table of width 100% not filling parent <div>

Question

A table of width 100% is not filling its parent div.

Example 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>

This produces the following output:

The table is not filling the div. What could be the problem?

Answer 1

The header div has a width of 100% and a padding of 5px which causes it to expand over its limits. Why not use a table for the whole thing?

Here is an working version:

<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

Its a myth that tables are easier to style -- they are easier in some respects, but they have plenty of quirks of their own. You are using them correctly though, since you are displaying tabular data, so don't let anyone tell you not to use them. Also, the table really has nothing to do with the problem here.

In this case, your issue is the 5px padding on the <div> which is causing the <div> to be 10px bigger than the 100% it would be otherwise (10px because it has 5px added to either side).

The solutions: (any one of the following will solve the issue for you)

• Give your <table> the same padding as the <div>
• Put the padding on the outer <div>
• Change the padding on the <div> to only apply to the top and bottom, with zero padding left and right (padding:5px 0 or padding-top:5px; padding-bottom:5px;`).
• Put the <div> inside another <div> and style the outer one of the two width:100% and the inner one padding:5px;

If I had to pick one of those, I'd go with the padding-top/padding-bottom option, but they should all work for you; it depends on exactly how you want it to look.

Also, bear in mind that <div>s are full width by default, so you don't need the width:100% on your div at all. In fact, removing that may even solve the problem itself since the div will fit itself to its surroundings, so may take the padding into account.