[ACCEPTED]-Table of width 100% not filling parent <div>-css

Accepted answer
Score: 15

The header div has a width of 100% and a 3 padding of 5px which causes it to expand 2 over its limits. Why not use a table for 1 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>

Score: 7

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

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

The solutions: (any 11 one of the following will solve the issue 10 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 9 go with the padding-top/padding-bottom option, but 8 they should all work for you; it depends 7 on exactly how you want it to look.

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

Score: 2

The thing to do here may be to use a table 4 header (thead) instead of the div and then you don't 3 have to mess with padding at all. This also 2 helps with SEO and is cleaner markup for 1 the page.

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

More Related questions