Establecer el borde de la tabla tr, funciona en todo, excepto IE 6 & 7

Question

Establecí el borde de la tabla event_calendar tr en rojo, funciona en todo excepto en IE 6 & 7. ¿Qué hay de malo en 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

IE no respeta la propiedad del borde para < tr> tags. Sin embargo, hay soluciones mediante la colocación de un borde superior e inferior alrededor de cada celda y el uso de "border-collapse: collapse;" entonces no hay espacio entre las celdas Me referiré al this resource here en el método exacto, pero esencialmente se verá así (no lo he probado yo mismo, así que no estoy seguro si esto es exactamente correcto, pero creo que puedes consultarlo).

Answer 2

Cambiar la selector de CSS para "tabla # event_calendar tr td " y debería funcionar.

Answer 3

Su CSS es bastante sensible, pero IE simplemente no hace bordes en elementos tr. Si utiliza este estilo, debe 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; 

} 

Answer 4

El ajuste del borde en el td es la solución más fácil. Pero si realmente quiere hacer las fronteras de <tr>, siempre se puede establecer:

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

Al hacer esto, usted suelta el ancho común entre la <td>. Si desea realizar todas ellas iguales en anchura, ajustar la pantalla para <td> a inline-block y establecer algún ancho:

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

Esto ayuda cuando se quiere sacar un poco en la frontera y en <td><tr>.

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