Collapsing Table Borders in CSS

CSS Web Development Front End Technology

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

Live Demo

<!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

Live Demo

<!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>