बॉर्डर-कोलैप्स गुण

border-collapse गुण td कोशिकाओं या th कोशिकाओं के बीच की दोहरी सीमाओं को HTML तालिका की (और कोशिका की सीमा और स्वयं तालिका की सीमा के बीच) समाप्त करके एक के रूप में दिखने के लिए मजबूर करता है।

यह गुण केवल तालिकाओं के लिए लागू होता है और उन तत्वों के लिए जिनका display मान table या inline-table हो। सामान्य ब्लॉक तत्वों के लिए, दुर्भाग्य से, यह काम नहीं करेगा। ध्यान दें कि इसे तालिका पर लागू करना चाहिए, न कि उसकी कोशिकाओं पर।

सिंटैक्स

cssसिलेक्टर {
  border-collapse: collapse | separate;
}

मान

डिफ़ॉल्ट मान: separate।

उदाहरण . separate मान

अभी तालिका में सभी सीमाएं दोहरी हैं (सीमा कोशिकाओं और स्वयं तालिका दोनों पर लागू है):

html<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>

csstable {
  border-collapse: separate;
  width: 400px;
  border-spacing: 0;
  border: 1px solid red;
}
td {
  border: 1px solid red;
  text-align: center;
}

Результат:

उदाहरण . separate मान

और अभी सीमा कोशिकाओं पर लागू है, लेकिन स्वयं तालिका पर लागू नहीं है। जहां दो कोशिकाओं की साझा सीमा है, वहाँ सीमाएं दोहरी होंगी, शेष स्थानों में - एकल:

html<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>

csstable {
  border-collapse: separate;
  width: 400px;
  border-spacing: 0;
}
td {
  border: 1px solid red;
  text-align: center;
}

Результат:

उदाहरण . collapse मान

अभी तालिका में सभी सीमाएं समाप्त हो जाएंगी और 1px की मोटाई में दिखाई देंगी, जैसा कि चाहिए:

html<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>

csstable {
  border-collapse: collapse;
  width: 400px;
  border: 1px solid red;
}
td {
  border: 1px solid red;
  text-align: center;
}

Результат: