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

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

<html>
  <head>
    <title>Test</title>
  </head>
  <body>
    <div style="width: 500px; background-color:#F33;">
      This is the outer div
      <div style="background-color: #FAA; padding: 10px; margin:10px;">
        This is the inner div
        <table cellpadding="0" cellspacing="0" style="width: 100%">
          <tr>
            <td style="border: 1px solid blue; background-color:#FEE;">Here is my td</td>
          </tr>
        </table>
      </div>
    </div>
  </body>
</html>
```
```
See
here
for an example.