Imposta il bordo alla tabella tr, funziona in tutto tranne IE 6 e 7

Question

Ho impostato il bordo per la tabella event_calendar tr per essere rosso, funziona in tutto eccetto IE 6 & 7. Cosa c'è di sbagliato nel mio 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 non rispetta la proprietà di confine per i tag < tr>. Tuttavia, esistono soluzioni alternative inserendo un bordo superiore e inferiore attorno a ciascuna cella e utilizzando "border-collapse: collapse;" quindi non c'è spazio tra le celle. Mi riferirò a this resource here sul metodo esatto, ma sarà essenzialmente simile a questo (non l'ho testato personalmente, quindi non sono sicuro che sia corretto, ma penso che si possa riff.)

Answer 2

Cambia la tua selettore CSS al "tavolo # event_calendar tr td" e dovrebbe funzionare.

Answer 3

Il tuo CSS è abbastanza ragionevole, ma IE non fa semplicemente confini con tr elementi. Se si utilizza questo stile, si dovrebbe ottenere il risultato desiderato:

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

L'impostazione del bordo sul td è la soluzione più semplice. Ma se davvero vuole veramente fare i bordi sul <tr>, è sempre possibile impostare:

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

In questo modo, si perde la larghezza comune tra l'<td>. Se si vuole fare tutti uguali sulla larghezza, impostare la visualizzazione per <td>-inline-block e impostare alcune larghezza:

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

Aiuta quando si desidera trarre alcune sfiorano il <td> e <tr>.

I contenuti generati da CSS come tr:before{} o tr:after{} possono sempre essere d'aiuto.