ボーダーを<tbody>要素に設定する方法は？

Question

なぜボーダーはtbodyの周りに表示されませんか？私はrules="groups"を試して、境界線が表示されますが、2つのtbodyセクションの間でのみ表示され、折りたたまれています。

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

表示を追加します。この

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

を試してみてくださいあなたはこのfiddle

Answer 2

追加：あなたのtbodyスタイルにブロック：

table {border-collapse: collapse;} 

FIDDLE

Answer 3

利用box-shadow代わりのborderにそれをテストすることができます。 border-collapseのどの値が適用されても問題なく動作します。また、border-radiusを適用することもできます。

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>