Установите границу в таблицу 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="#" onclick="location.href='http://webdev.herkimer.edu/calendar/2009/03/'; return false;">&lt;&lt;</a></div></th>
        <th colspan="5"><h1>April 2009</h1></th>
        <th><div class="calendarMonthLinks"><a class="calendarMonthLinks" href="#" onclick="location.href='http://webdev.herkimer.edu/calendar/2009/05/'; return false;">&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>

Ответ 1

IE не соблюдает свойство border для тегов <tr> . Тем не менее, есть обходные пути, помещая верхнюю и нижнюю границу вокруг каждой ячейки и используя "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;
}

Ответ 2

Ваш CSS достаточно разумный, но IE просто не ограничивает три элемента. Если вы используете этот стиль, вы должны получить ожидаемый результат:

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;

}

Ответ 3

Установка границы на td является самым простым решением. Но если вы действительно хотите сделать границы на <tr>, вы всегда можете установить:

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

Таким образом, вы теряете общую ширину между <td>. Если вы хотите сделать все равным по ширине, установите для дисплея <td> значение inline-block и установите некоторую ширину:

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

Это помогает, когда вы хотите нарисовать некоторую границу на <td> и на <tr>.

Сгенерированное CSS-содержимое, такое как tr:before{} или tr:after{}, всегда может помочь.

Ответ 4

Измените свой CSS-селектор на "table # event_calendar tr td" и он должен работать.