CSS - Nested table border showing. How do I stop this?

Question

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;

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

This CSS gives me

The Markup is;

<table id="ScheduledLeaveCalendar">

    <tr>
        <th colspan="2"></th>
        <th colspan="6">Oct 2011</th>
        <th colspan="1"></th>
    </tr>
    <tr>
            <th>F</th><th></th><th>M</th><th>T</th><th>W</th><th>T</th><th>F</th><th></th><th>M</th>
    </tr>
    <tr>
    <th>14</th><th></th><th>17</th><th>18</th><th>19</th><th>20</th><th>21</th><th></th><th>24</th>
    </tr>
    <tr>
    <td class="StandardCellHeight&#32;DefaultColour"></td>
    <td class="StandardCellHeight&#32;DefaultColour"></td>
    <td><table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%"><tr><td />
<td class="StandardCellHeight&#32;AnnualLeaveColour" />
</tr></table></td>
    <td><table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%"><tr><td class="StandardCellHeight&#32;AnnualLeaveColour" />
<td />
</tr></table></td>
    <td class="StandardCellHeight&#32;DefaultColour"></td>
    <td class="StandardCellHeight&#32;DefaultColour"></td>
    <td class="StandardCellHeight&#32;DefaultColour"></td>
    <td class="StandardCellHeight&#32;DefaultColour"></td>
    <td class="StandardCellHeight&#32;DefaultColour"></td>

</tr>

</table>

See http://jsfiddle.net/Dqm68/1/

Answer 1

You can use

#ScheduledLeaveCalendar td td {
    border: 0;
}

which means the td elements that are nested in other td elements should have no border..

Demo at http://jsfiddle.net/Dqm68/5/

Answer 2

Simply add another line to remove the border from the nested table td.

#ScheduledLeaveCalendar table td {border:none}

http://jsfiddle.net/blowsie/Dqm68/3/