Come si inserisce un bordo attorno a un tag tr?

Question

Ho una semplice pagina html:

<table> 
    <tr><th>header1</th><th>header2</th></tr> 
    <tr><td>item1</td><td>item2</td></tr> 
    <tr><td>item3</td><td>item4</td></tr> 
</table> 

Con qualche semplice css:

tr { 
    border:1px solid blue; 
} 

mi si aspetterebbe questo per mettere un bordo intorno alle tr s ma non inserire un bordo attorno a tutti. Come posso ottenere un bordo attorno allo tr?

Answer 1

Aggiungi table { border-collapse: collapse; }.

Da the CSS2 specification:

In [modello border-collapse: separate], ogni cella ha un bordo individuale. [...] Righe, colonne, gruppi di righe e gruppi di colonne non possono avere bordi (ad esempio, i programmi utente devono ignorare le proprietà del bordo per tali elementi).

Answer 2

Il codice funziona, se si desidera un border solo sulla riga.

Tuttavia, se si sta cercando di avere la border ovunque, è necessario fare questo:

tr, td, th{ 
    border:1px solid blue; 
} 

Esempio: http://jsfiddle.net/jasongennaro/83VjH/

Answer 3

frontiere può essere aggiunto a righe della tabella con l'aggiunta di bordo a <td> e <th> elementi [Questo è fondamentalmente un trucco CSS per raggiungere (hack!) Che non è possibile aggiungere bordi a <tr> e <tbody> elementi della tabella]. Aggiungi i seguenti stili al tuo CSS per ottenere bordi attorno a righe o intestazioni o celle di tabella.

table { 
    border-collapse: collapse; 
} 
table td, table th { 
    border: solid white; 
} 
td { 
    border-color: red (just an example, can be as per your requirement); 
} 

Spiegazione:

1. regola border-collapse viene aggiunto tutto il tavolo. Può avere due altre proprietà possibili separate (predefinita) ed ereditate. Per i rispettivi effetti riferiscono https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse
2. Seconda regola cioè aggiungendo proprietà border <td> (per celle di dati) e <th> (per celle di intestazione) è un must. Se non lo aggiungi, i bordi non verranno visualizzati. In questa regola border-color è bianco, può essere un altro colore a tua scelta al posto del bianco. Fondamentalmente, questa regola attiverà i bordi attorno alle celle della tabella e poiché il colore è bianco, nulla verrà visualizzato.
3. Infine, aggiungere il colore desiderato. Questa regola può essere più specifica per applicare il bordo a uno <td> o una classe di <td>.