CSS का उपयोग करके टेबल बॉर्डर्स को कॉलैप्स करना

border-collapse प्रॉपर्टी

टेबल बॉर्डर्स को कॉलैप्स (मर्ज) करने के लिए CSS में border-collapse प्रॉपर्टी का उपयोग करें।

मान:

• collapse: आसन्न सेल्स के बॉर्डर्स को सिंगल बॉर्डर में मर्ज करता है
• separate: बॉर्डर्स अलग रखता है (डिफ़ॉल्ट)
• initial / inherit: मानक CSS मान

उदाहरण 1: कॉलैप्स्ड बॉर्डर्स के साथ स्टाइल्ड टेबल

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  background-color: black;
  color: white;
}
th, td {
  border: 2px dashed yellow;
}
</style>
</head>
<body>
<h2>टीम रैंकिंग टेबल</h2>
<table>
  <tr><th>टीम</th><th>रैंक</th><th>पॉइंट्स</th></tr>
  <tr><td>भारत</td><td>1</td><td>200</td></tr>
  <tr><td>इंग्लैंड</td><td>2</td><td>180</td></tr>
  <tr><td>ऑस्ट्रेलिया</td><td>3</td><td>150</td></tr>
  <tr><td>न्यूजीलैंड</td><td>4</td><td>130</td></tr>
  <tr><td>दक्षिण अफ्रीका</td><td>5</td><td>100</td></tr>
  <tr><td>वेस्टइंडीज</td><td>6</td><td>80</td></tr>
  <tr><td>पाकिस्तान</td><td>7</td><td>70</td></tr>
</table>
</body>
</html>

आउटपुट

पीले रंग की डैश्ड बॉर्डर्स के साथ कॉलैप्स्ड टेबल - सेल्स के बीच सिंगल बॉर्डर लाइन।

उदाहरण 2: कॉलैप्स बिना सेल बॉर्डर्स के

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  background-color: black;
  color: white;
}
</style>
</head>
<body>
<h2>टीम रैंकिंग टेबल</h2>
<table>
  <tr><th>टीम</th><th>रैंक</th><th>पॉइंट्स</th></tr>
  <tr><td>भारत</td><td>1</td><td>200</td></tr>
  <tr><td>इंग्लैंड</td><td>2</td><td>180</td></tr>
  <tr><td>ऑस्ट्रेलिया</td><td>3</td><td>150</td></tr>
  <tr><td>न्यूजीलैंड</td><td>4</td><td>130</td></tr>
  <tr><td>दक्षिण अफ्रीका</td><td>5</td><td>100</td></tr>
  <tr><td>वेस्टइंडीज</td><td>6</td><td>80</td></tr>
  <tr><td>पाकिस्तान</td><td>7</td><td>70</td></tr>
</table>
</body>
</html>

आउटपुट

केवल टेबल की बाहरी बॉर्डर दिखाई देगी (क्योंकि सेल्स पर कोई बॉर्डर नहीं है)।

border-collapse: separate (डिफ़ॉल्ट) के साथ तुलना:

table {
  border-collapse: separate;
  border-spacing: 10px;  /* केवल separate के साथ काम करता है */
}

मुख्य अंतर:

बॉर्डर संघर्ष समाधान (collapse मोड में):

जब दो सेल्स अलग बॉर्डर स्टाइल्स घोषित करते हैं, तो CSS प्राथमिकता: hidden > double > solid > dashed > dotted > ridge > outset > groove > inset > none