embococorkese
New Member
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:\[code\]<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>\[/code\]And here is the CSS I am using:\[code\]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;}\[/code\]I made this using a script I was testing, so please don't mind the way the table was made 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 in). Here is a jsFiddle with the above code: jsfiddle.net/kdH5M/4/
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 in). Here is a jsFiddle with the above code: jsfiddle.net/kdH5M/4/