ansaurus

Question

How do I make an HTML table the same width as its containing div tag?

Answer 1

+3 A:

The following works for me in Firefox and IE7... a guideline, though is: if you set width on an element, don't set margin or padding on the same element. This holds true especially if you're mixing units -- say, mixing percents and pixels.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

<html>
<head>
<title>Test</title>
</head>
<body>
<div style="width: 500px; border: 1px solid red; padding: 10px; margin:10px;">
<table cellpadding="0" cellspacing="0" style="width: 100%">
<tr>
<td style="border: 1px solid blue">Here is my td</td>
</tr>
</table>
</div>
</body>
</html>

Nate 2008-09-16 17:18:24

Answer 2

A:

@davethegr8,

Unfortunately I can't hard-code the width as I'm dynamically generating the HTML and it includes nesting the divs recursively inside each other (with left margin on each div, this creates a nice 'nested' effect).

Sorry - should've mentioned this in my original post.

Chris Roberts 2008-09-16 17:21:25

For future searchers, go ahead and edit your original post to include this stipulation now.

davebug 2008-09-16 17:25:38

Yes please edit your post so that it contains some of the actual markup that your code dynamically generates.

jessegavin 2008-09-16 17:52:52

I figured, but I thought I'd mention it just in case.

davethegr8 2008-09-16 18:55:07

Answer 3

+1 A:

In the case where you're automatically generating code that may have margins on it, adding a simple, unstyled <div> element wrapping your table might do the trick.

Nate 2008-09-16 17:26:59

Answer 4

A:

That is the big problem with the way CSS treats width property and the reason Microsoft implemented box model differently at first. Microsoft lost, and now it's either width or margin/padding/border for an element.

Situation may change to better in CSS3 with box-sizing property

buti-oxa 2008-09-16 17:39:19

Answer 5

A:

I've always used <table width="100%">

Joe Morgan 2008-09-16 17:57:17

Answer 6

A:

Maybe this extensive article about Internet Explorer and the CSS box model will help?

Christian Davén 2008-09-16 18:18:17

Answer 7

A:

try this:

div {
 padding: 0px;
}

table {
    width: 100%;
    margin: 0px;
}

by setting the padding of the div to zero, you will remove the space between the borders of the div and the content of it. by setting the width of the table to 100% and it's margin to zero, you will remove the space between the borders of the table and it's container.

farzad 2008-09-16 19:53:57

Answer 8

A:

Percentage-based widths are relative to the first parent element that has a width specified. If your div does not have a width specified then the width of the table has nothing to do with it. Can you post a simplified version of the markup that shows what your DOM tree looks like?

From another angle, if your parent div DOES have a width set and the margin is still affecting your table then you are probably in quirks mode. You have specified your DOCTYPE, but be aware that the DOCTYPE element MUST be the first line in the file. Something else to note when dealing with IE6, by default, if your content is wider than your parent, the parent will be stretched to accomodate, you can stop this by adding overflow: hidden to your css for the parent element but in the process you might obscure some of the child element's content.

Eric DeLabar 2008-09-16 20:17:52

Answer 9

+1 A:

Not really sure what the problem is here - this works fine in IE6/7 and FF3. Setting the width of the .container DIV element sets the table's width. Adding margins to the .container div doesn't affect the table. Maybe there's something else in your markup / CSS that's affecting the layout?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

<html>
    <head>
     <title>Boxes and Tables</title>
     <style type="text/css">

     div.container {
      background-color: yellow;
      border: 1px solid #000;
      width: 500px;
      margin: 5px auto;
     }

     table.contained {
      width: 100%;
      border-collapse: collapse;
     }

     table td {
      border: 2px solid #999;
     }

     </style>
    </head>

    <body>
     <div class="container">
      <table class="contained">
       <thead>
        <tr><th>Column1</th><th>Column2</th><th>Column3</th></tr>
       </thead>
       <tbody>
        <tr><td>Value</td><td>Value</td><td>Value</td></tr>
        <tr><td>Value</td><td>Value</td><td>Value</td></tr>
        <tr><td>Value</td><td>Value</td><td>Value</td></tr>
        <tr><td>Value</td><td>Value</td><td>Value</td></tr>
        <tr><td>Value</td><td>Value</td><td>Value</td></tr>
       </tbody>
      </table>
     </div>
    </body>
</html>

David Heggie 2008-09-17 15:44:14

Answer 10

A:

Incidentally, is there a good reason for you not to use the strict doctype? strict should always be the default. transitional is only intended for legacy code.

Konrad Rudolph 2008-09-17 15:48:06

Answer 11

A:

I figured out the heart of the problem here. It has to do with border-collapse. I've had this same problem for a while now. Since tables often have thin borders the problem is not obvious to most people. If you put a regular table with width set to 100% inside a div, as Nate has, you will be fine.

However, if you specify border-collapse:collapse on the table, the table will break out of the div. This is not obvious to most people because it may only break out by one pixel, or depending on the context it's in and the user agent, perhaps not at all.

To make it clearer what is going on, try this: Put Nate's example next to David Heggie's example in an html file.

It will look like both work fine. But now, change Nate's inline TD style to "border: 40px solid blue". Change David's table td style to "border: 40px solid #999;". At this point, David's table breaks out of the div by 50% of its border on each side. Nate's still works. Put a border-collapse:collapse style on Nate's table and his breaks now too.

It's the border-collapse that is causing it!

Chris 2009-03-16 14:53:25

Answer 12

A:

The following code works on IE6/8, Chrome, Firefox, Safari:

<style type="text/css">
    div.container 
    {
        width: 500px;
        padding: 10px;
        margin: 10px;
        border: 1px solid red;
    }
    table.contained 
    {
        width: 100%;
        border: 1px solid blue;
    }
</style>

<div class="container">
    <table class="contained">
    <tr>
        <td>Hello</td><td>World</td>
    </tr>
    </table>
</div>

Try copy and paste and build on it (just move the style part to the header or to a separate .css file), maybe the way you using of putting the CSS inline (using the style tag) has something to do with the problem, or it is some other CSS surrounding the div table blocks? Floating can also give troubles.

P.S. I set red and blue borders to see where the areas expand to for a more visual check.

Nestor 2010-10-11 16:36:16

ansaurus

tags:

views:

answers:

How do I make an HTML table the same width as its containing div tag?

related questions