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

Firefox错误地显示表格单元格

1 个答案: