web-dev-qa-db-ja.com

境界線をテーブルtrに設定し、IE 6＆7を除くすべてで機能します

テーブル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>
htmlcsshtml-table
22
Brad

IEは<tr>タグのborderプロパティを尊重しません。ただし、各セルの上部と下部に境界線を配置し、「border-collapse：collapse;」を使用することで回避策があります。したがって、セル間にスペースはありません。正確なメソッドで このリソースはここ を参照しますが、基本的にはこのようになります（私は自分でテストしていないため、これが正確かどうかはわかりませんが、リフできると思います。）

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

table#event_calendar td, table#event_calendar th {
    border-top: 1px solid red;
    border-bottom: 1px solid red;
}
54
Dan Lew

あなたの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;

}
7
Thomas Petersen

Tdに境界を設定するのが最も簡単な解決策です。しかし、本当に<tr>で境界を作成したい場合は、いつでも設定できます。

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

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

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

<td>と<tr>に境界線を描くときに役立ちます。

tr:before{}やtr:after{}などのCSSで生成されたコンテンツも常に役立ちます。

4
pierrepierre

CSSセレクターを "table＃event_calendar tr td"に変更すると、機能するはずです。

0
David