CSS | border-collapse Property
The border-collapse property in CSS is used to set the borders of the cell present inside the table and tells whether these cells will share a common border or not.
Syntax:
border-collapse: separate|collapse|initial|inherit;
Default Value : Its default value is separate.
Property Values:
- separate: This property is used to set separate border of a cell.
- collapse: It is used to collapse adjacent cells and make common border.
- initial: It is used to set border-collapse property to its default value.
- inherit: It is used when border-collapse property inherit from its parent elements.
Example 1:
html
<!DOCTYPE html> <html> <head> <title> CSS border-collapse Property </title> <!-- border-collapse CSS property --> <style> table, td, th { border: 1px solid black; } #separateTable { border-collapse: separate; } #collapseTable { border-collapse: collapse; } </style> </head> <body> <h2> border-collapse: separate </h2> <table id = "separateTable"> <tr> <th>Author Name</th> <th>Contact No</th> </tr> <tr> <td>Geek</td> <td>XXXXXXXXXX</td> </tr> <tr> <td>GFG</td> <td>XXXXXXXXXX</td> </tr> </table> <h2> border-collapse: collapse </h2> <table id = "collapseTable"> <tr> <th>Author Name</th> <th>Contact No</th> </tr> <tr> <td>Geek</td> <td>XXXXXXXXXX</td> </tr> <tr> <td>GFG</td> <td>XXXXXXXXXX</td> </tr> </table> </body></html> |
Output:
Example 2:
html
<!DOCTYPE html> <html> <head> <title> CSS border-collapse Property </title> <style> table, td, th { border: 1px solid black; } /* border spacing is used to specify the width between border and adjacent cells */ #separateTable { border-collapse: separate; border-spacing: 10px; } #collapseTable { border-collapse: collapse; border-spacing: 10px; } #initialTable { border-collapse: initial; } </style> </head> <body> <h2> border-collapse: separate </h2> <table id = "separateTable"> <tr> <th>Author Name</th> <th>Contact No</th> </tr> <tr> <td>Geek</td> <td>XXXXXXXXXX</td> </tr> <tr> <td>GFG</td> <td>XXXXXXXXXX</td> </tr> </table> <h2> border-collapse: collapse </h2> <!-- border spacing property has no effect on border-collapse property--> <table id="collapseTable"> <tr> <th>Author Name</th> <th>Contact No</th> </tr> <tr> <td>Geek</td> <td>XXXXXXXXXX</td> </tr> <tr> <td>GFG</td> <td>XXXXXXXXXX</td> </tr> </table> <h2> border-collapse: initial </h2> <table id="initialTable"> <tr> <th>Author Name</th> <th>Contact No</th> </tr> <tr> <td>Geek</td> <td>XXXXXXXXXX</td> </tr> <tr> <td>GFG</td> <td>XXXXXXXXXX</td> </tr> </table> </body></html> |
Output:
Supported Browsers: The browser supported by border-collapse property are listed below:
- Google Chrome 1.0
- Edge 12.0
- Internet Explorer 5.0
- Firefox 1.0
- Opera 4.0
- Apple Safari 1.2
Please Login to comment...