The CSS border-collapse property is used to specify whether <table>elements have shared or separate borders. It can take two values: separate and collapse.
Syntax
The syntax of CSS border-collapse property is as follows −
Selector {
border-collapse: /*value*/
}The following examples illustrate CSS border-collapse −
Example
<!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>Output
This gives the following output −
Example
<!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>Output
This gives the following output −
