title: Table with style"width=100%" cause different result in IE and Firefox
body: <p>This is the code:</p>
  <p>it works well in Firefox and Opera, however it does not in IE:</p>
  <hr />
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot; /&gt;
          &lt;style&gt;
                  body {
                      border: 1px solid gray;
                      line-height: 120%;
                      margin: 5px;
                      width:100%;
                  }
                  
                  h1#header,h5#footer {
                      background-color: gray;
                      clear: both;
                      color: white;
                      padding: 0.5em;
                      margin: 0;
                  }
                  
                  div#menu {
                      width: 190px;
                      float: left;
                  }
                  
                  div#body {
                      margin-left: 200px;
                      padding: 2px;
                      border-left: 2px gray solid;
                  }
                  
                  table {
                      border: 1px solid #CEDCED;
                      border-collapse: collapse;
                      margin: 2px auto;
                      width: 100%;
                  }
                  
                  th {
                      border: 2px ridge maroon;
                      background-color: maroon;
                      color: white;
                      padding: 2px;
                  }
                  
                  tr {
                      background-color: white;
                      margin: 1px;
                  }
          &lt;/style&gt;
          &lt;script type=&quot;text/javascript&quot;&gt;
                  function setTableWidth(){
                      alert(document.getElementById('tab').offsetWidth);
                  }
          &lt;/script&gt;
      &lt;/head&gt;
      
      &lt;body onload=setTableWidth()&gt;
  
          &lt;h1 id=&quot;header&quot;&gt;Header&lt;/h1&gt;
  
          &lt;div id=&quot;menu&quot;&gt;
              &lt;ul&gt;
                      &lt;li&gt;link1&lt;/li&gt;
                      &lt;li&gt;link2&lt;/li&gt;
                      &lt;li&gt;link3&lt;/li&gt;
                      &lt;li&gt;link4&lt;/li&gt;
                      &lt;li&gt;link5&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
              
          &lt;div id=&quot;body&quot;&gt;
              &lt;table id=&quot;tab&quot;&gt;
                  &lt;tr&gt;
                      &lt;th&gt;name&lt;/th&gt;
                      &lt;th&gt;age&lt;/th&gt;
                      &lt;th&gt;email&lt;/th&gt;
                  &lt;/tr&gt;
          
                  &lt;tr&gt;
                      &lt;td&gt;test&lt;/td&gt;
                      &lt;td&gt;100&lt;/td&gt;
                      &lt;td&gt;xx&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
          &lt;/div&gt;
  
          &lt;!-- foot --&gt;
          &lt;h5 id=&quot;footer&quot;&gt;Copyright xxx&lt;/h5&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <hr />
  <p>I have add a js to see the width of the table,if you test it in the browser,you will get the size,the following is mine:</p>
  <blockquote>
  <p>Firefox:1062</p>
  <p>IE:1521.</p>
  </blockquote>
  <p>So,I wonder why?</p>
  <p>In my opinion,the result of Firefox is normal, why the table take more than the width of its parent (the div#body in the example)?</p>