HTML DOM स्टाइल बॉर्डरसंपत्ति संक्षिप्त करें

<घंटा/>

BorderCollapse संपत्ति का उपयोग यह निर्धारित करने या वापस करने के लिए किया जाता है कि

तत्वों में साझा या अलग सीमाएं होनी चाहिए या नहीं। यह दो मान ले सकता है, अलग और संक्षिप्त।

सिंटैक्स

−

. के लिए वाक्य रचना निम्नलिखित है

BorderCollapse प्रॉपर्टी सेट करना -

object.style.borderCollapse = "separate|collapse|initial|inherit"

मान

संपत्ति के मूल्यों को इस प्रकार समझाया गया है -

<टेबल> <थेड>

क्रमांक <थ>	मान और विवरण
1	अलग करें यह डिफ़ॉल्ट मान है और प्रत्येक टेबल सेल की अलग-अलग सीमाएं हैं।
2	संक्षिप्त करें यह तालिका सेल मानों के बीच नहीं खींची जाने वाली सीमा को निर्दिष्ट करता है।
3	प्रारंभिक इस संपत्ति को प्रारंभिक मूल्य पर सेट करने के लिए।
4	उत्तराधिकारी मूल संपत्ति मूल्य प्राप्त करने के लिए

उदाहरण

आइए हम बॉर्डर कोलैप्स प्रॉपर्टी के लिए एक उदाहरण देखें -

<!DOCTYPE html>
<html>
<head>
<style>
   div {
      display: flex;
      float: left;
   }
   table {
      border: 3px solid black;
   }
   td {
      border: 3px solid lightgreen;
   }
   th {
      border: 3px solid lightblue;
   }
</style>
<script>
   function collapseBorder(){
      document.getElementById("t1").style.borderCollapse="collapse";
      document.getElementById("Sample").innerHTML="The table borders are now collapsed";
   }
</script>
</head>
<body>
<table id="t1">
<tr>
<th>FRUITS</th>
<th>PRICE </th>
</tr>
<tr>
<td>MANGO </td>
<td>40</td>
</tr>
<tr>
<td>APPLE</td>
<td>50</td>
</tr>
</table>
<p>Collapse the above table borders by clicking the below button</p>
<button onclick="collapseBorder()">COLLAPSE BORDER</button>
<p id="Sample"></p>
</body>
</html>

आउटपुट

यह निम्नलिखित आउटपुट उत्पन्न करेगा -

HTML DOM स्टाइल बॉर्डरसंपत्ति संक्षिप्त करें

COLLAPSE BORDER बटन पर क्लिक करने पर -

HTML DOM स्टाइल बॉर्डरसंपत्ति संक्षिप्त करें