テーブルtrにボーダーを設定し、IE 6＆7以外のすべてで動作します。

Question

テーブルevent_calendar trのボーダーを赤に設定します。IE 6以外のすべてで動作します。7.私のCSSに問題がありますか？

table#event_calendar tr { 
    border:1px solid red; 
} 

<div class="content-body"> 
<table id="event_calendar"> 
    <tr class="calendarHeader"> 
     <th><div class="calendarMonthLinks"><a href="http://webdev.herkimer.edu/calendar/2009/03/">&lt;&lt;</a></div></th> 
     <th colspan="5"><h1>April 2009</h1></th> 
     <th><div class="calendarMonthLinks"><a class="calendarMonthLinks" href="http://webdev.herkimer.edu/calendar/2009/05/">&gt;&gt;</a></div></th> 
    </tr> 
    <tr> 
     <td class="calendarDayHeading">Sunday</td> 
     <td class="calendarDayHeading">Monday</td> 
     <td class="calendarDayHeading">Tuesday</td> 
     <td class="calendarDayHeading">Wednesday</td> 
     <td class="calendarDayHeading">Thursday</td> 
     <td class="calendarDayHeading">Friday</td> 
     <td class="calendarDayHeading">Saturday</td> 
    </tr> 
</table> 
</div> 

Answer 1

IEは< tr>タグの境界プロパティを尊重しません。しかし、各セルの周りに上下の境界線を配置し、 "border-collapse：collapse;"を使用することで回避策があります。細胞間にはスペースがありません。正確な方法についてはthis resource hereを参照していますが、基本的にはこのようになります（自分でテストしていないので、これが正しいかどうかはわかりませんが、

Answer 2

は、 "テーブル＃event_calendar trの TD" あなたのCSSセレクタを変更

、それが動作するはずです。

Answer 3

あなたのCSSは十分に賢明ですが、IEはtr要素に罫線を付けません。このスタイルを使用すると、意図した結果が得られるはずです。

table#event_calendar { 
    border-top:1px solid red; 
    border-right:1px solid red; 
    border-left:1px solid red; 
    border-collapse:collapse; 
} 

table#event_calendar td, table#event_calendar th { 
    border-bottom:1px solid red; 

} 

Answer 4

tdの境界線を設定するのが最も簡単です。あなたが本当に<tr>上の境界線を作成したい場合は、いつでも設定することができます。しかし：

tr { display:block; border-bottom:1px dotted #F00; } 

これを行うことにより、あなたは<td>間の共通の幅を失います。あなたは幅にそれらのすべてが同じようにしたい場合は、inline-blockに<td>のための表示を設定し、いくつかの幅を設定します。

td { display:inline-block; width:20%; } 

あなたは<td>上と<tr>上のいくつかの境界線を描画したいときに役立ちます。

tr:before{}またはtr:after{}のようなCSS生成コンテンツは、常に同様に役立ちます。