html - thead - Establecer borde a la tabla tr, funciona en todo excepto en IE 6 y 7

tabla encabezado fijo html

Question

Puse el borde para que la tabla event_calendar tr sea roja, funciona en todo excepto en IE 6 y 7. ¿Qué está mal con mi 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

Cambie su selector de CSS a "table # event_calendar tr td " y debería funcionar.

Answer 2

Establecer el borde en el td es la solución más fácil. Pero si realmente desea hacer los bordes en <tr> , siempre puede establecer:

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

Al hacer esto, pierdes el ancho común entre <td> . Si desea que todos sean iguales en ancho, configure la pantalla para <td> en inline-block y establezca un poco de ancho:

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

Ayuda cuando desea dibujar un borde en el <td> y en <tr> .

El contenido generado por CSS como tr:before{} o tr:after{} siempre puede ayudar también.

Answer 3

IE no respeta la propiedad de borde para etiquetas <tr>. Sin embargo, existen soluciones al colocar un borde superior e inferior alrededor de cada celda y usar "border-collapse: collapse"; así que no hay espacio entre las células. Me referiré a este recurso aquí sobre el método exacto, pero esencialmente se verá así para usted (no lo he probado yo mismo, así que no estoy seguro de si esto es exactamente correcto, pero creo que puede hacer una revisión). .)

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;
}

Answer 4

Su CSS es suficientemente sensible, pero IE simplemente no hace bordes en los elementos tr. Sin embargo, si usa este estilo, debería obtener el resultado deseado:

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;

}