1

すべてのテーブル セルに境界線が設定されたテーブルがあります。これはカレンダーに使用されます。現在の日付のテーブル セルには、そのテーブル セルの背景色を変更する div が含まれています。ただし、Firefox で表示すると、表のセルの右と下の境界線が上書きされます (または覆い隠されます。よくわかりません)。これは、Opera のテーブル セルの上枠と左枠をオーバーライドします。Chrome と Safari では問題なく動作します。IE ではテストされていません。Firefox と Opera ですべての境界線を表示するにはどうすればよいですか? コードは次のとおりです。

HTML:

<table class="calendar" frame="box" rules="none">
    <tr>
        <td></td>...//seven td's total
    </tr>
    <tr><td class="very_light_gray"><div class="calendar_day_wrap">Today</div></td>...</tr>
    .... // 5 or 6 table rows total
</table>

CSS:

.calendar {
    position:inherit;
    margin:auto;
    height:100%;
    width:100%;
    z-index:99999;
    border-collapse:collapse;
}

.calendar tr {
    height:20%;
    position:relative;
    z-index:2;
}

.calendar td {
    border:1px solid #ccc !important;
    width:14%;
    vertical-align: top;
    position:relative;
    z-index:2;
}

.calendar_day_wrap {
    position:relative;    
    width:100%;
    height:100%;
}

.very_light_gray {
    background-color:#F8F8F8 !important;
}
4

2 に答える 2

1

を設定するrules="none"と、列と行の境界が明示的にオフになります。

次にborder-collapse:collapse、セルの境界線を列/行の境界線で折りたたむ を設定します。各境界セグメントには、どの境界宣言が優先されるかのリストがあり、仕様ごとに「明示的にオフ」が最も優先されます。

border-collapse: separate使用するか、設定しないかのどちらかですrules="none"。おそらく、あなたも望んでいないでしょうframe="box"。

于 2012-06-29T01:45:11.277 に答える
0

Opera 12.0 と Firefox で動作するこのコードはどうでしょうか。

.calendar {
    margin:auto;
    height:100%;
    width:100%;
    border-collapse:collapse;
    border:1px solid #ccc;}

.calendar tr {height:20%;}

.calendar tr:nth-child(1) td {
    border:1px solid #ccc;
    height:20%;}

.calendar td {
    width:14%;
    vertical-align: top;}

.calendar_day_wrap {
    width:100%;
    height:100%;}

.very_light_gray {
    background-color:#F8F8F8;}
于 2012-06-29T16:30:34.103 に答える