Come impostare il bordo sull'elemento <tbody>?

Question

Perché il bordo non mostra circa tbody nel seguente? Ho provato rules="groups" e il bordo appare, ma solo tra le due sezioni tbody ed è compresso.

table.sectioned tbody { 
 
    border: 2px solid black; 
 
    border-collapse: separate; 
 
    border-spacing: 4px; 
 
}

<table class="sectioned"> 
 
    <tbody> 
 
    <tr><td colspan="2"><b>General Data</b></td></tr> 
 
    <tr><td>Tail Number</td><td>N0809021</td></tr> 
 
    <tr><td>Type of Ownership</td><td>personal</td></tr> 
 
    <tr><td>Type of Aircraft</td><td>aircraft under 13,000 pounds</td></tr> 
 
    <tr><td>Year of Manufacture</td><td>1999</td></tr> 
 
    <tr><td>Use of Aircraft</td><td>private</td></tr> 
 
    <tr><td>Start Date</td><td></td></tr> 
 
    <tr><td>Policy Length</td><td>6 months</td></tr> 
 
    </tbody> 
 
    <tbody> 
 
    <tr><td colspan="2"><b>Additional Aircraft Information</b></td></tr> 
 
    <tr><td>Manufacturer</td><td></td></tr> 
 
    <tr><td>Model</td><td></td></tr> 
 
    <tr><td>Engine Make</td><td></td></tr> 
 
    <tr><td>Number of Seats</td><td></td></tr> 
 
    </tbody> 
 
</table>

Answer 1

Aggiungi display: block al vostro stile tbody. Prova questo

tbody{ 
    display:block; 
    border: 2px solid black; 
    border-collapse: separate; 
    border-spacing: 4px; 
} 

È possibile verificare il lavoro svolto su questo fiddle

Answer 2

Add:

table {border-collapse: collapse;} 

FIDDLE

Answer 3

Uso box-shadow invece di border. Funziona indipendentemente dal valore di border-collapse applicato. Inoltre, puoi anche applicare border-radius ad esso.

tbody { 
 
    box-shadow: 0 0 0 1px black; 
 
    border-radius: 5px; 
 
}

<table> 
 
    <thead> 
 
    <tr> 
 
     <th>Firstname</th> 
 
     <th>Lastname</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>Jill</td> 
 
     <td>Smith</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Eve</td> 
 
     <td>Jackson</td> 
 
    </tr> 
 
    </tbody> 
 
</table>