Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Difference between CSS border-collapse:collapse; and border-collapse:separate;
The CSS border-collapse property controls how table borders are displayed. The key difference between collapse and separate is how adjacent cell borders are handled − collapse merges adjacent borders into a single border, while separate keeps each cell's borders distinct with gaps between them.
Syntax
table {
border-collapse: collapse | separate;
}
Possible Values
| Value | Description |
|---|---|
collapse |
Adjacent borders are merged into a single border |
separate |
Each cell maintains its own border with spacing between cells (default) |
Example: Comparing Border Collapse Values
The following example demonstrates both values side by side to show the visual difference −
<!DOCTYPE html>
<html>
<head>
<style>
table {
margin: 20px;
border: 2px solid #333;
}
.collapse-table {
border-collapse: collapse;
}
.separate-table {
border-collapse: separate;
border-spacing: 5px;
}
td {
border: 2px solid #666;
padding: 15px;
text-align: center;
background-color: #f0f0f0;
}
caption {
font-weight: bold;
margin-bottom: 10px;
}
</style>
</head>
<body>
<table class="collapse-table">
<caption>Border Collapse</caption>
<tr><td>India</td><td>Japan</td></tr>
<tr><td>Australia</td><td>Canada</td></tr>
</table>
<table class="separate-table">
<caption>Border Separate</caption>
<tr><td>India</td><td>Japan</td></tr>
<tr><td>Australia</td><td>Canada</td></tr>
</table>
</body>
</html>
Two tables appear on the page: 1. "Border Collapse" table: Adjacent cell borders merge into single lines, creating a clean grid appearance with no gaps between cells. 2. "Border Separate" table: Each cell maintains its own border with 5px spacing between cells, creating a separated, card-like appearance.
Key Differences
| Feature | collapse | separate |
|---|---|---|
| Border appearance | Merged, single borders | Individual cell borders |
| Spacing | No gaps between cells | Gaps controlled by border-spacing |
| Default value | No | Yes |
Conclusion
Use border-collapse: collapse for clean, grid-like tables without gaps, and border-collapse: separate when you want distinct, spaced-out cells with individual borders.
Updated on: 2026-03-15T11:19:13+05:30
278 Views
Advertisements