सीमा को <tbody> तत्व पर कैसे सेट करें?

Question

निम्नलिखित में tbody के आसपास सीमा क्यों नहीं दिखती है? मैंने rules="groups" की कोशिश की और सीमा दिखाई देती है, लेकिन केवल दो 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>