CSS table border-collapse property
CSS Table border-collapse Property
Description
border-collapse Determines the border model used in table rendering.
Possible Values
- collapse − Borders will be collapsed into a single border. Two adjacent cells will share a single border.
-
separate − Borders are separated. Each cell has its own borders, which are not shared with other cells in the table.
Applies to
An element with a table or inline table display attribute.
DOM Syntax
object.style.borderCollapse = "Any of the two values";
Example
Here is an example showing two values:
<html>
<head>
<style type = "text/css">
table.one {border-collapse:collapse;}
table.two {border-collapse:separate;}
td.a {
border-style:dotted;
border-width:3px;
border-color:#000000;
padding: 10px;
}
td.b {
border-style:solid;
border-width:3px;
border-color:#333333;
padding:10px;
}
</style>
</head>
<body>
<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>
<br />
<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>
</body>
</html>
This will produce the following result −
