CSS - border-collapse Property
border-collapse determines the border model used in the rendering of a table.
Possible Values
collapse − Borders are collapsed to make a single border. Two adjacent cells will share a border.
separate − Borders are separated. Every cell has its own border, and none of these borders are shared with other cells in the table.
Applies to
Elements with a display of table or inline-table.
DOM Syntax
object.style.borderCollapse = "Any of the two values";
Example
Following is the example to show both values −
<html> <head> <style> div { padding: 15px; } table.one {border-collapse:collapse;} table.two {border-collapse:separate;} td.a { border-style:dotted; border-width:3px; border-color:#000000; padding: 10px; background-color: aquamarine; } td.b { border-style:solid; border-width:3px; border-color:#333333; padding:10px; background-color: thistle; } </style> </head> <body> <div> <table class = "one"> <caption>Collapse Border Example</caption> <tr><td class = "a"> Cell A Collapse Example</td></tr> <tr><td class = "b"> Cell B Collapse Example</td></tr> </table> </div> <div> <table class = "two"> <caption>Separate Border Example</caption> <tr><td class = "a"> Cell A Separate Example</td></tr> <tr><td class = "b"> Cell B Separate Example</td></tr> </table> </div> </body> </html>
Advertisements
To Continue Learning Please Login
Login with Google