title: CSS - Nested table border showing. How do I stop this?
body: <p>I am using ie 8.
  I have the following CSS where I want to show the border for the outer table, but not the table nested inside one of the cells;</p>
  
  <pre><code>table#ScheduledLeaveCalendar
  {
  table-layout:fixed;
  }
  
  /* Calendar that shows annual leave */
  #ScheduledLeaveCalendar
  {
      border-collapse:collapse;
  }
  #ScheduledLeaveCalendar td, #ScheduledLeaveCalendar th 
  {
      font-size:0.8em;
      border:1px solid #2906A6;   /* dark blue */
  
  }
  #ScheduledLeaveCalendar th 
  {
      width:30px;
      font-size:0.9em;
      text-align:center;
      padding:5px 3px 4px 3px;
      padding-top:5px;
      padding-bottom:4px;
      background-color:#6640EE;   /* blue */
      color:#ffffff;
  }
  #ScheduledLeaveCalendar td
  {
      padding: 0px;
      margin: 0px;
  }
  
  #ScheduledLeaveCalendar table
  {
      border-collapse: collapse;
      border: 0px;
      margin: 0px;
      padding: 0px;
  }
  </code></pre>
  
  <p>This CSS gives me
  <img src="https://i.stack.imgur.com/F79I7.jpg" alt="When splitting the cell in 2, the border becomes thicker"></p>
  
  <p>The Markup is;</p>
  
  <pre><code>&lt;table id="ScheduledLeaveCalendar"&gt;
  
      &lt;tr&gt;
          &lt;th colspan="2"&gt;&lt;/th&gt;
          &lt;th colspan="6"&gt;Oct 2011&lt;/th&gt;
          &lt;th colspan="1"&gt;&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
              &lt;th&gt;F&lt;/th&gt;&lt;th&gt;&lt;/th&gt;&lt;th&gt;M&lt;/th&gt;&lt;th&gt;T&lt;/th&gt;&lt;th&gt;W&lt;/th&gt;&lt;th&gt;T&lt;/th&gt;&lt;th&gt;F&lt;/th&gt;&lt;th&gt;&lt;/th&gt;&lt;th&gt;M&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
      &lt;th&gt;14&lt;/th&gt;&lt;th&gt;&lt;/th&gt;&lt;th&gt;17&lt;/th&gt;&lt;th&gt;18&lt;/th&gt;&lt;th&gt;19&lt;/th&gt;&lt;th&gt;20&lt;/th&gt;&lt;th&gt;21&lt;/th&gt;&lt;th&gt;&lt;/th&gt;&lt;th&gt;24&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
      &lt;td class="StandardCellHeight&amp;#32;DefaultColour"&gt;&lt;/td&gt;
      &lt;td class="StandardCellHeight&amp;#32;DefaultColour"&gt;&lt;/td&gt;
      &lt;td&gt;&lt;table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%"&gt;&lt;tr&gt;&lt;td /&gt;
  &lt;td class="StandardCellHeight&amp;#32;AnnualLeaveColour" /&gt;
  &lt;/tr&gt;&lt;/table&gt;&lt;/td&gt;
      &lt;td&gt;&lt;table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%"&gt;&lt;tr&gt;&lt;td class="StandardCellHeight&amp;#32;AnnualLeaveColour" /&gt;
  &lt;td /&gt;
  &lt;/tr&gt;&lt;/table&gt;&lt;/td&gt;
      &lt;td class="StandardCellHeight&amp;#32;DefaultColour"&gt;&lt;/td&gt;
      &lt;td class="StandardCellHeight&amp;#32;DefaultColour"&gt;&lt;/td&gt;
      &lt;td class="StandardCellHeight&amp;#32;DefaultColour"&gt;&lt;/td&gt;
      &lt;td class="StandardCellHeight&amp;#32;DefaultColour"&gt;&lt;/td&gt;
      &lt;td class="StandardCellHeight&amp;#32;DefaultColour"&gt;&lt;/td&gt;
  
  &lt;/tr&gt;
  
  &lt;/table&gt;
  </code></pre>
  
  <p>See <a href="http://jsfiddle.net/Dqm68/1/" rel="nofollow noreferrer">http://jsfiddle.net/Dqm68/1/</a></p>