Il bordo della riga tabella non funziona in Firefox e Safari

Question

Volevo che la riga della tabella avesse un bordo in basso e in alto. Il codice seguente funziona in IE ma non in Firefox o Safari! Gentilmente aiuto!

HTML

<tr class='TableRow'> 

CSS

.TableRow{ 
    border-bottom: 2px solid rgb(167,167,167); 
    border-top: 2px solid rgb(167,167,167); 
    } 

Answer 1

Per quanto ne so, non è possibile impostare i bordi a righe della tabella tramite CSS. Ma ti suggerirò una soluzione alternativa: imposta i bordi alle celle all'interno della riga, quindi usa cellspacing = "0". Ecco il CSS:

.TableRow td{ 
    border-bottom: 2px solid rgb(167,167,167); 
    border-top: 2px solid rgb(167,167,167); 
} 

E un HTML di esempio potrebbe essere:

<table cellspacing="0"> 
    <tr class="TableRow"> 
     <td>A</td> 
     <td>B</td> 
    </tr> 
    <tr> 
     <td>C</td> 
     <td>D</td> 
    </tr> 
</table> 

La prima fila sarà quella con i bordi.

Spero che questo aiuti.

MODIFICA: ho provato il codice e non ho mostrato il bordo in nessun browser, incluso IE.

Answer 2

Questo risolve il problema?

tr.TableRow td { 
    border-bottom: 2px solid rgb(167,167,167); 
    border-top: 2px solid rgb(167,167,167); 
} 

si aggiunge un bordo a tutti i dati della tabella all'interno di tutte le righe con la classe TableRow. L'aggiunta del tr. all'inizio è una buona pratica, poiché presumo che utilizzerai questa classe solo con la riga della tabella.

Se si applica a più righe, è inoltre possibile aggiungere border-collapse:collapse; che comprime i bordi in un singolo bordo.

Answer 3

Aggiungere border-collapse:collapse alla tabella, quindi è possibile aggiungere il bordo al tr.

Esempio:

table.myTable{ 
    border-collapse:collapse; 
} 

table.myTable tr{ 
    border:1px solid red; 
}