CSS border-collapse: collapse और separate में अंतर

परिचय

`border-collapse` प्रॉपर्टी टेबल सेल बॉर्डर्स के रेंडरिंग को नियंत्रित करती है: संयुक्त (`collapse`) या अलग (`separate`।

मान

दृश्य अंतर

उदाहरण

<html>
<head>
    <style>
        table.one { border-collapse: collapse; }
        table.two { border-collapse: separate; border-spacing: 2px; }
        
        td.a { 
            border-style: dotted; 
            border-width: 2px; 
            border-color: #000; 
            padding: 20px; 
        }
        td.b { 
            border-style: solid; 
            border-width: 2px; 
            border-color: #333; 
            padding: 20px; 
        }
        
        caption { margin-bottom: 5px; font-weight: bold; }
    </style>
</head>
<body>
    <table class="one">
        <caption>Border Collapse (संयुक्त बॉर्डर)</caption>
        <tr><td class="a">India</td></tr>
        <tr><td class="b">Australia</td></tr>
    </table>
    
    <br>
    
    <table class="two">
        <caption>Border Separate (अलग बॉर्डर)</caption>
        <tr><td class="a">India</td></tr>
        <tr><td class="b">Australia</td></tr>
    </table>
</body>
</html>

संबंधित प्रॉपर्टी: border-spacing

केवल `border-collapse: separate` के साथ काम करता है:

table {
    border-collapse: separate;
    border-spacing: 10px 5px;  /* क्षैतिज लंबवत */
}

कब क्या उपयोग करें?

• collapse: क्लीन, आधुनिक टेबल्स, स्प्रेडशीट जैसा रूप, कम CSS
• separate: जब सेल्स के बीच विजुअल गैप चाहिए, जटिल बॉर्डर स्टाइल्स

नोट

`collapse` मोड में, `border-radius` काम नहीं करता और `border-spacing` नजरअंदाज होता है।