View video tutorial
CSS Border Collapse
CSS
The CSS property border-collapse controls whether the borders of adjacent table cells are merged into a single border or displayed as separate, distinct borders.
CSS border-collapse property
➔ This property is primarily applied to the <table> element and elements with a property value of display: table.
➔ By default, table cells specify their own independent borders and create a double-border effect where cells meet.
➔ If the border-collapse value is collapse, properties like border-spacing and border-radius will not work.
Syntax
border-collapse: separate | collapse | initial | inherit;
Property values
| Value | Description |
|---|---|
| separate | Each table cell specifies its own independent borders. This is default. |
| collapse | The borders of adjacent cells are merged into a single, shared border. |
| initial | Sets the property to its default value. |
| inherit | The element inherits the property value from its parent element. |
Example
<!DOCTYPE html>
<html>
<head>
<title>CSS border collapse Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8" />
<style>
table {
width: 100%;
}
td,
th {
border: 1px solid #00000055;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
thead {
background-color: #107080;
color: white;
}
</style>
</head>
<body>
<h3>CSS border collapse Example</h3>
<h3>Birds Table (border-collapse: collapse;)</h3>
<table style="border-collapse: collapse;">
<thead>
<tr>
<th>Name</th>
<th>Found in significant numbers</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bald Eagle</td>
<td>United States</td>
</tr>
<tr>
<td>Peacock</td>
<td>India</td>
</tr>
<tr>
<td>Emu</td>
<td>Australia</td>
</tr>
</tbody>
</table>
<br>
<h3>Birds Table (withoud border-collapse: collapse;)</h3>
<table>
<thead>
<tr>
<th>Name</th>
<th>Found in significant numbers</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bald Eagle</td>
<td>United States</td>
</tr>
<tr>
<td>Peacock</td>
<td>India</td>
</tr>
<tr>
<td>Emu</td>
<td>Australia</td>
</tr>
</tbody>
</table>
</body>
</html>
Copy the code and click on the "Try it Now" button to see how it works.