HTML DOM Style borderCollapse प्रॉपर्टी

borderCollapse प्रॉपर्टी का उपयोग यह सेट या प्राप्त करने के लिए किया जाता है कि <table> तत्वों में साझा या अलग बॉर्डर होने चाहिए। यह दो मान ले सकता है, separate और collapse।

सिंटैक्स

borderCollapse प्रॉपर्टी सेट करने के लिए सिंटैक्स निम्नलिखित है:

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

मान

प्रॉपर्टी मानों को निम्नानुसार समझाया गया है:

उदाहरण

borderCollapse प्रॉपर्टी का एक उदाहरण देखते हैं:

<!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>

आउटपुट

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

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