ansaurus

Question

Table of width 100% not filling parent <div>

Answer 1

A:

You Have not closed Your Div Tag

2010-10-29 11:35:58

uhh... yes he has.

Spudley 2010-10-29 11:58:56

Answer 2

+8 A:

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>

Paul Ardeleanu 2010-10-29 11:36:34

Pardel is right- using width=xxx in combination with padding on the same element doesn't work as expected in all browsers - some add the padding to the width.

Thilo 2010-10-29 11:47:24

Uh oh.. The box model! That one totally didn't enter my mind. Thank you very much for pointing out.

Nirmal 2010-10-29 12:08:14

Answer 3

A:

Cellpadding="5" is what is causing the discrepency.

Lill Lansey 2010-10-29 11:36:48

this is not the cause of the problem. (he probably *should* be using CSS styling instead of cellpadding attribute, but it does work this way)

Spudley 2010-10-29 12:00:36

Answer 4

+2 A:

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.

Spudley 2010-10-29 11:50:36

Thank you for the suggestions Spudley.

Nirmal 2010-10-29 15:24:52

@Nirmal - it's a pleasure.

Spudley 2010-10-29 15:28:34

Answer 5

+1 A:

The thing to do here may be to use a table header (thead) instead of the div and then you don't have to mess with padding at all. This also helps with SEO and is cleaner markup for 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> </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>

Liam 2010-10-29 11:53:51

Thank you. Will consider it.

Nirmal 2010-10-29 15:25:32

ansaurus

tags:

views:

answers:

Table of width 100% not filling parent <div>

related questions