<p>I have a table inside a div. I want the table to occupy the entire width of the div tag.</p>

<p>In the CSS, I've set the <code>width</code> of the table to <code>100%</code>.  Unfortunately, when the div has some <code>margin</code> on it, the table ends up wider than the div it's in.</p>

<p>I need to support IE6 and IE7 (as this is an internal app), although I'd obviously like a fully cross-browser solution if possible!</p>

<p>I'm using the following DOCTYPE...</p>

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

<hr>

<p><strong>Edit</strong>: 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).</p>

[{'answer_id': 74715, 'author': 'Nate', 'author_id': 12779, 'author_profile': 'https://Stackoverflow.com/users/12779', 'pm_score': 3, 'selected': False, 'text': '<p>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 <em>especially</em> if you\'re mixing units -- say, mixing percents and pixels.</p>\n\n<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;\n\n&lt;html&gt;\n  &lt;head&gt;\n    &lt;title&gt;Test&lt;/title&gt;\n  &lt;/head&gt;\n  &lt;body&gt;\n    &lt;div style="width: 500px; background-color:#F33;"&gt;\n      This is the outer div\n      &lt;div style="background-color: #FAA; padding: 10px; margin:10px;"&gt;\n        This is the inner div\n        &lt;table cellpadding="0" cellspacing="0" style="width: 100%"&gt;\n          &lt;tr&gt;\n            &lt;td style="border: 1px solid blue; background-color:#FEE;"&gt;Here is my td&lt;/td&gt;\n          &lt;/tr&gt;\n        &lt;/table&gt;\n      &lt;/div&gt;\n    &lt;/div&gt;\n  &lt;/body&gt;\n&lt;/html&gt;\n</code></pre>\n\n<p>See <a href="http://bl.ocks.org/1752582" rel="nofollow noreferrer">here</a> for an example.</p>\n'}, {'answer_id': 74799, 'author': 'Nate', 'author_id': 12779, 'author_profile': 'https://Stackoverflow.com/users/12779', 'pm_score': 1, 'selected': False, 'text': "<p>In the case where you're automatically generating code that may have margins on it, adding a simple, unstyled <code>&lt;div&gt;</code> element wrapping your table might do the trick.</p>\n"}, {'answer_id': 74913, 'author': 'buti-oxa', 'author_id': 2515, 'author_profile': 'https://Stackoverflow.com/users/2515', 'pm_score': 0, 'selected': False, 'text': '<p>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. </p>\n\n<p>Situation may change to better in CSS3 with <a href="http://www.css3.info/preview/box-sizing/" rel="nofollow noreferrer">box-sizing property</a></p>\n'}, {'answer_id': 75100, 'author': 'Joe Morgan', 'author_id': 13244, 'author_profile': 'https://Stackoverflow.com/users/13244', 'pm_score': 1, 'selected': False, 'text': '<p>I\'ve always used <code>&lt;table width="100%"&gt;</code></p>\n'}, {'answer_id': 75343, 'author': 'Christian Davén', 'author_id': 12534, 'author_profile': 'https://Stackoverflow.com/users/12534', 'pm_score': 0, 'selected': False, 'text': '<p>Maybe this extensive article about <a href="http://www.456bereastreet.com/archive/200612/internet_explorer_and_the_css_box_model/" rel="nofollow noreferrer">Internet Explorer and the CSS box model</a> will help?</p>\n'}, {'answer_id': 76242, 'author': 'farzad', 'author_id': 9394, 'author_profile': 'https://Stackoverflow.com/users/9394', 'pm_score': 0, 'selected': False, 'text': "<p>try this:</p>\n\n<pre><code>div {\n padding: 0px;\n}\n\ntable {\n    width: 100%;\n    margin: 0px;\n}\n</code></pre>\n\n<p>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.</p>\n"}, {'answer_id': 76478, 'author': 'Eric  DeLabar', 'author_id': 7556, 'author_profile': 'https://Stackoverflow.com/users/7556', 'pm_score': 2, 'selected': False, 'text': "<p>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 <code>DOM</code> tree looks like?  </p>\n\n<p>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 <code>DOCTYPE</code>, but be aware that the <code>DOCTYPE</code> element MUST be the first line in the file.  Something else to note when dealing with <code>IE6</code>, by default, if your content is wider than your parent, the parent will be stretched to accommodate, you can stop this by adding <code>overflow: hidden</code> to your <code>css</code> for the parent element but in the process you might obscure some of the child element's content.  </p>\n"}, {'answer_id': 84685, 'author': 'David Heggie', 'author_id': 4309, 'author_profile': 'https://Stackoverflow.com/users/4309', 'pm_score': 2, 'selected': False, 'text': '<p>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?</p>\n\n<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"\n"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;\n\n&lt;html&gt;\n    &lt;head&gt;\n        &lt;title&gt;Boxes and Tables&lt;/title&gt;\n        &lt;style type="text/css"&gt;\n\n        div.container {\n            background-color: yellow;\n            border: 1px solid #000;\n            width: 500px;\n            margin: 5px auto;\n        }\n\n        table.contained {\n            width: 100%;\n            border-collapse: collapse;\n        }\n\n        table td {\n            border: 2px solid #999;\n        }\n\n        &lt;/style&gt;\n    &lt;/head&gt;\n\n    &lt;body&gt;\n        &lt;div class="container"&gt;\n            &lt;table class="contained"&gt;\n                &lt;thead&gt;\n                    &lt;tr&gt;&lt;th&gt;Column1&lt;/th&gt;&lt;th&gt;Column2&lt;/th&gt;&lt;th&gt;Column3&lt;/th&gt;&lt;/tr&gt;\n                &lt;/thead&gt;\n                &lt;tbody&gt;\n                    &lt;tr&gt;&lt;td&gt;Value&lt;/td&gt;&lt;td&gt;Value&lt;/td&gt;&lt;td&gt;Value&lt;/td&gt;&lt;/tr&gt;\n                    &lt;tr&gt;&lt;td&gt;Value&lt;/td&gt;&lt;td&gt;Value&lt;/td&gt;&lt;td&gt;Value&lt;/td&gt;&lt;/tr&gt;\n                    &lt;tr&gt;&lt;td&gt;Value&lt;/td&gt;&lt;td&gt;Value&lt;/td&gt;&lt;td&gt;Value&lt;/td&gt;&lt;/tr&gt;\n                    &lt;tr&gt;&lt;td&gt;Value&lt;/td&gt;&lt;td&gt;Value&lt;/td&gt;&lt;td&gt;Value&lt;/td&gt;&lt;/tr&gt;\n                    &lt;tr&gt;&lt;td&gt;Value&lt;/td&gt;&lt;td&gt;Value&lt;/td&gt;&lt;td&gt;Value&lt;/td&gt;&lt;/tr&gt;\n                &lt;/tbody&gt;\n            &lt;/table&gt;\n        &lt;/div&gt;\n    &lt;/body&gt;\n&lt;/html&gt;\n</code></pre>\n'}, {'answer_id': 84714, 'author': 'Konrad Rudolph', 'author_id': 1968, 'author_profile': 'https://Stackoverflow.com/users/1968', 'pm_score': 0, 'selected': False, 'text': '<p>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.</p>\n'}, {'answer_id': 650759, 'author': 'Chris', 'author_id': 13700, 'author_profile': 'https://Stackoverflow.com/users/13700', 'pm_score': 2, 'selected': False, 'text': "<p>I figured out the heart of the problem here. It has to do with <code>border-collapse</code>. 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.</p>\n\n<p>However, if you specify <code>border-collapse:collapse</code> 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.</p>\n\n<p>To make it clearer what is going on, try this: Put Nate's example next to David Heggie's example in an html file.</p>\n\n<p>It will look like both work fine. But now, change Nate's inline TD style to <code>border: 40px solid blue</code>. Change David's table td style to <code>border: 40px solid #999;</code>. At this point, David's table breaks out of the div by 50% of its border on each side. Nate's still works.\nPut a <code>border-collapse:collapse</code> style on Nate's table and his breaks now too.</p>\n\n<p>It's the <code>border-collapse</code> that is causing it!</p>\n"}, {'answer_id': 3908157, 'author': 'Nestor', 'author_id': 470854, 'author_profile': 'https://Stackoverflow.com/users/470854', 'pm_score': 0, 'selected': False, 'text': '<p>The following code works on IE6/8, Chrome, Firefox, Safari:</p>\n\n<pre><code>&lt;style type="text/css"&gt;\n    div.container \n    {\n        width: 500px;\n        padding: 10px;\n        margin: 10px;\n        border: 1px solid red;\n    }\n    table.contained \n    {\n        width: 100%;\n        border: 1px solid blue;\n    }\n&lt;/style&gt;\n\n&lt;div class="container"&gt;\n    &lt;table class="contained"&gt;\n    &lt;tr&gt;\n        &lt;td&gt;Hello&lt;/td&gt;&lt;td&gt;World&lt;/td&gt;\n    &lt;/tr&gt;\n    &lt;/table&gt;\n&lt;/div&gt;\n</code></pre>\n\n<p>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>\n\n<p>P.S. I set red and blue borders to see where the areas expand to for a more visual check.</p>\n'}, {'answer_id': 12907189, 'author': 'William', 'author_id': 1562498, 'author_profile': 'https://Stackoverflow.com/users/1562498', 'pm_score': 0, 'selected': False, 'text': '<p>overflow: auto; on the outermost div may help if you are seeing weird things - like the outermost div being smaller than you want it or not taking up the entire size of the divs inside of it.</p>\n'}, {'answer_id': 28622543, 'author': 'Sharad Biradar', 'author_id': 2114874, 'author_profile': 'https://Stackoverflow.com/users/2114874', 'pm_score': 5, 'selected': False, 'text': '<p>Add the below CSS to your <code>&lt;table&gt;</code>:</p>\n\n<pre><code>table-layout: fixed;\nwidth: 100%;\n</code></pre>\n'}]
['https://Stackoverflow.com/questions/74612', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/475/']