CSS - 显示嵌套的表格边框。我怎么阻止这个？

Question

我正在使用ie 8。 我有以下CSS，我想显示外表的边框，但不是嵌套在其中一个单元格中的表;

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

这个CSS给了我

标记是;

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

请参阅http://jsfiddle.net/Dqm68/1/

Answer 1

您可以使用

#ScheduledLeaveCalendar td td {
    border: 0;
}

这意味着嵌套在其他td元素中的td元素应该没有边框..

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

演示

Answer 2

只需添加另一行即可从嵌套表td中删除边框。

#ScheduledLeaveCalendar table td {border:none}

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