html - Firefox 无法正确显示表格单元格

Question

在用 HTML 构建表格时，我在 Firefox 中遇到了一个奇怪的行为，即两个单元格被错误地分组。这是上述表格的 HTML:

<table id="schedule">
    <thead>
        <tr>
            <td id="corner"></td>
            <th colspan="1">Monday</th>
            <th colspan="1">Tuesday</th>
            <th colspan="1">Wednesday</th>
            <th colspan="1">Thursday</th>
            <th colspan="1">Friday</th>
        </tr>
    </thead>
    <tfoot></tfoot>
    <tbody>
        <tr style="height: 54px;">
            <th>10:00 - 11:00</th>
            <td class="class" rowspan="9"><span class="acronym">1</span><span class="location"><br/></span></td>
            <td></td>
            <td></td>
            <td></td>
            <td class="class" rowspan="4"><span class="acronym">6</span><span class="location"><br/></span></td>
        </tr>
        <tr style="height: 54px;">
            <th>11:00 - 12:00</th>
            <td style="display: none;"></td>
            <td class="class" rowspan="7"><span class="acronym">2</span><span class="location"><br/></span></td>
            <td></td>
            <td></td>
            <td style="display: none;"></td>
        </tr>
        <tr style="height: 54px;">
            <th>12:00 - 13:00</th>
            <td style="display: none;"></td>
            <td style="display: none;"></td>
            <td class="class" rowspan="5"><span class="acronym">3</span><span class="location"><br/></span></td>
            <td></td>
            <td style="display: none;"></td>
        </tr>
        <tr style="height: 54px;">
            <th>13:00 - 14:00</th>
            <td style="display: none;"></td>
            <td style="display: none;"></td>
            <td style="display: none;"></td>
            <td class="class" rowspan="3"><span class="acronym">4</span><span class="location"><br/></span></td>
            <td style="display: none;"></td>
        </tr>
        <tr style="height: 54px;">
            <th>14:00 - 15:00</th>
            <td style="display: none;"></td>
            <td style="display: none;"></td>
            <td style="display: none;"></td>
            <td style="display: none;"></td>
            <td class="class" rowspan="1"><span class="acronym">5</span><span class="location"><br/></span></td>
        </tr>
        <tr style="height: 54px;">
            <th>15:00 - 16:00</th>
            <td style="display: none;"></td>
            <td style="display: none;"></td>
            <td style="display: none;"></td>
            <td style="display: none;"></td>
            <td></td>
        </tr>
        <tr style="height: 54px;">
            <th>16:00 - 17:00</th>
            <td style="display: none;"></td>
            <td style="display: none;"></td>
            <td style="display: none;"></td>
            <td></td>
            <td></td>
        </tr>
        <tr style="height: 54px;">
            <th>17:00 - 18:00</th>
            <td style="display: none;"></td>
            <td style="display: none;"></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr style="height: 54px;">
            <th>18:00 - 19:00</th>
            <td style="display: none;"></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

这是我使用的 CSS:

body {
    margin: 2%;
    padding: 0;
    font-family: sans-serif;
    background: #f9f9f9;
    color: #333;
}
#schedule {
    width: 100%;
    border-collapse: collapse;
    vertical-align: middle;
    font-size: 9px;
}
#schedule #corner {
    border: 0;
    background: none;
}
#schedule th {
    min-width: 85px;
    width: 16%;
    border: 1px solid #a6a6a6;
    padding: 5px 0;
    background: #737373;
    color: #fff;
    font-weight: bold;
    text-align: center;
}
#schedule td {
    border: 1px solid #a6a6a6;
    background: white;
    text-align: center;
}
#schedule .class {
    background: #e0e0e0;
}
#schedule .acronym {
    font-weight: bold;
    font-size: 11px;
}
#schedule .location {
    font-size: 8px;
}
#schedule .footer {
    border: 0;
}

我使用我正在测试的脚本制作了这个，所以请不要介意表格与所有 display: none 的显示方式。

因此，发生的情况是，在 Firefox 中，在最后一列(星期五)中，两个单元格(5 和 6)似乎都已分组，尽管它们并未分组。
这可能是我正在使用的 CSS 或 Firefox 本身的问题，因为其他浏览器(至少我测试过的浏览器)似乎没有出现该问题。

这是一个包含上述代码的 JSFiddle:jsfiddle.net/kdH5M/4/

Answer 1

我修改了你的fiddle .问题是边框折叠，确实很奇怪，所以我删除了它并像这样手动定义了边框:

#schedule {
    width: 100%;
    vertical-align: middle;
    border: 1px solid #a6a6a6;
    border-collapse:separate;
    border-width:0 1px 0 0;
    font-size: 9px;
}

#schedule tbody tr:first-child th,
#schedule thead th {
    border-top: 1px solid #a6a6a6;
}


#schedule th {
    min-width: 85px;
    width: 16%;
    border: 1px solid #a6a6a6;
    border-width:0 0 1px 1px;
    padding: 5px 0;
    background: #737373;
    color: #fff;
    font-weight: bold;
    text-align: center;
}
#schedule td {
    border: 1px solid #a6a6a6;
     border-width:0 0 1px 1px;
    background: white;
    text-align: center;
}