Question

While building a table in HTML I came across a weird behaviour in Firefox where two cells are incorrectly grouped. Here is the HTML of the said table:

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

And here is the CSS I am using:

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

I made this using a script I was testing, so please don’t mind the way the table appears with all the display: none.

So, what happens is that, in Firefox, in the last column (Friday), both cells (5 and 6) seem grouped, even though they are not.
This might be a problem with the CSS I am using or with Firefox itself, since the problem doesn’t seem to occur in other browsers (at least the ones I have tested this on).

Here is a JSFiddle with the above code: jsfiddle.net/kdH5M/4/

Answer 1

I have modified your fiddle. The problem is the border-collapse, weird indeed, so I removed it and defined the border manually like this:

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