Cách đặt đường viền thành <tbody> yếu tố?

Question

Tại sao đường viền không hiển thị xung quanh tbody trong phần sau? Tôi đã thử rules="groups" và đường viền xuất hiện, nhưng chỉ giữa hai phần tbody và đường này bị thu gọn.

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

Thêm display: block phong cách tbody của bạn. Hãy thử điều này

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

Bạn có thể kiểm tra nó ra trên fiddle

Answer 2

Add:

table {border-collapse: collapse;} 

FIDDLE

Answer 3

này Sử dụng box-shadow thay vì border. Nó hoạt động bất kể giá trị của border-collapse đã được áp dụng. Ngoài ra, bạn cũng có thể áp dụng border-radius cho nó.

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>