title: Unexplained Extra Space, Possibly Padding Surrounding a Table within a Table
body: <p>This is an experiment I'm working on for a layout. I had a lot of issues positioning divs to achieve this effect, so I turned to the old standby, table cascades. My problem here is that that last upper box has extra padding in all 3 browsers and I cannot seem to CSS or HTML it away no matter what I try. The red boxes should be flush over the green bits you see surrounding them and there shouldn't be a 1px visible green line to the right of the blue row between the red boxes. Any insight would be extremely appreciated.</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
   table { border-collapse: collapse; border-spacing: 0; padding: 0; margin: 0;}
  
  td table { border-collapse: collapse; border-spacing: 0; padding: 0; margin: 0;}
  
  img { display: block; }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body style="background-color: black;"&gt;
  &lt;table style="background-color: white; height: 525px; width: 3200; padding-top: 25px;  padding-bottom: 25px;"&gt;
  &lt;tr&gt;
   &lt;td colspan="1" style="width: 350px;"&gt;
     &lt;table class="container" style="height: 475px; width: 350px; margin-left: 25px; margin-right: 25px;"&gt;
      &lt;tr&gt;
    &lt;td style="background-color: green; height: 225px; width: 350px;" colspan="3"&gt;
  
    &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td style="background-color: blue; height: 25px; width: 350px;" colspan="3"&gt;
  
    &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td style="background-color: green; height: 200px; width: 175px;"&gt;
  
    &lt;/td&gt;
    &lt;td style="background-color: blue; height: 200px; width: 25px;"&gt;
  
    &lt;/td&gt;
    &lt;td style="background-color: green; height: 200px; width: 125px;"&gt;
  
    &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/td&gt;
  
  &lt;td colspan="1" style="width: 125px;"&gt;
  &lt;table class="container" style="height: 475px; width: 125px; margin-right: 25px;"&gt;
  &lt;tr&gt;
    &lt;td style="background-color: red; height: 475px; width: 125px;"&gt;
  
    &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/td&gt;
  
  &lt;td colspan="1"&gt;
  &lt;table class="container" style="height: 475px; width: 450px; margin-right: 25px;"&gt;
  &lt;tr&gt;
    &lt;td style="background-color: green; height: 25px; width: 225px;"&gt;
  
    &lt;/td&gt;
    &lt;td style="background-color: blue; height: 225px; width: 25px;" &gt;
  
    &lt;/td&gt;
    &lt;td style="background-color: green; height: 225px; width: 225px;" &gt;
  
    &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td style="background-color: blue; height: 25px; width: 450px;" colspan="3"&gt;
  
    &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td style="background-color: green; height: 200px; width: 450px;" colspan="3"&gt;
  
    &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/td&gt;
  
  &lt;td colspan="1"&gt;
  &lt;table class="container" style="height: 475px; width: 400px; margin-right: 25px;"&gt;
  &lt;tr style="height: 225px;"&gt;
    &lt;td style="background-color: green; height: 225px; width: 275px;"&gt;
  
     &lt;table style="width: 100%; height: 225px;"&gt;
  
      &lt;tr&gt;
           &lt;td style="height: 100px; width: 225px; background-color: red;"&gt;
  
           &lt;/td&gt;      
          &lt;/tr&gt;
  
          &lt;tr&gt;
           &lt;td style="background-color: blue; height: 25px; width: 225px;"&gt;
  
           &lt;/td&gt;
          &lt;/tr&gt;      
  
          &lt;tr&gt;
           &lt;td style="height: 100px; width: 225px; background-color: red;"&gt;
  
           &lt;/td&gt;      
          &lt;/tr&gt;
  
         &lt;/table&gt;       
  
    &lt;/td&gt;
    &lt;td style="background-color: blue; height: 225px; width: 25px;" &gt;
  
    &lt;/td&gt;
    &lt;td style="background-color: green; height: 225px; width: 100px;" &gt;
  
    &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td style="background-color: blue; height: 25px; width: 400px;" colspan="3"&gt;
  
    &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td style="background-color: green; height: 200px; width: 400px;" colspan="3"&gt;
  
    &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/td&gt;
  
  &lt;/table&gt;
  &lt;/td&gt;
  
  &lt;/table&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>