2

在用 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/

4

1 回答 1

0

我修改了你的小提琴。问题是边框折叠，确实很奇怪，所以我删除了它并手动定义了边框，如下所示：

#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;
}
于 2013-01-26T23:43:10.387 回答