CSS border-collapse प्रॉपर्टी का उपयोग यह निर्दिष्ट करने के लिए किया जाता है कि <table> एलिमेंट्स के शेयर्ड या अलग बॉर्डर्स हों। यह दो मान ले सकता है: separate और collapse।
सिंटैक्स
CSS border-collapse प्रॉपर्टी का सिंटैक्स निम्नलिखित है:
Selector { border-collapse: /*value*/ }
निम्नलिखित उदाहरण CSS border-collapse को दर्शाते हैं:
उदाहरण
<!DOCTYPE html> <html> <head> <style> #cdemo { border-collapse: collapse; } #sdemo { border-collapse: separate; } table { display: inline-table; margin: 30px; } th,td { border: 3px ridge orange; } td { border-color: red; } caption { box-shadow: 0px -5px 4px 3px green; } </style> </head> <body> <h2>Employee Records</h2> <table id="sdemo"> <caption> Employee Details (Separate Border) </caption> <tr> <th>Employee</th> <th>Department</th> </tr> <tr> <td>Tim</td> <td>Operations</td> </tr> <tr> <td>Nathan</td> <td>Finance</td> </tr> <tr> <td>John </td> <td>Marketing</td> </tr> </table> <table id="cdemo"> <caption> Employee Details (Collapse Border) </caption> <tr> <th>Employee</th> <th>Department</th> </tr> <tr> <td>Tim</td> <td>Operations</td> </tr> <tr> <td>Nathan</td> <td>Finance</td> </tr> <tr> <td>John </td> <td>Marketing</td> </tr> </table> </body> </html>
आउटपुट
यह निम्नलिखित आउटपुट देता है:
एक और उदाहरण
<!DOCTYPE html> <html> <head> <style> table { border-collapse: separate; empty-cells: hide; display: inline-table; margin: 30px; } table+table { border-collapse: collapse; empty-cells: hide; } td { border: 3px ridge lightblue; } caption { box-shadow: 0px -5px 4px 3px grey; } </style> </head> <body> <h2>Demo Tables</h2> <table> <caption>Demo caption</caption> <tr> <td>demo</td> <td>demo</td> </tr> <tr> <td>demo</td> <td>demo</td> </tr> <tr> <td>demo</td> <td>demo</td> <td></td> </tr> </table> <table> <caption>Demo caption</caption> <tr> <td>demo</td> <td>demo</td> </tr> <tr> <td>demo</td> <td>demo</td> </tr> <tr> <td>demo</td> <td>demo</td> <td></td> </tr> </table> </body> </html>
आउटपुट
यह निम्नलिखित आउटपुट देता है:
