2

HTML でテーブルを作成しているときに、Firefox で 2 つのセルが正しくグループ化されていないという奇妙な動作に遭遇しました。上記のテーブルの 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 に答える