CSS border-collapse Property

Description

The border-collapse CSS property is used to control the spacing and overlapping of adjacent table borders in HTML documents. It is particularly relevant when styling tables with borders. When set to "collapse," it ensures that borders between table cells merge into a single border, creating a neater and more compact appearance. This property simplifies table design and improves visual consistency by eliminating any gaps or spacing between cell borders, resulting in a cleaner and more cohesive table layout. Conversely, when set to "separate," each table cell retains its own border, which can lead to a more spaced-out and segmented look for the table.

Initial value: seperate
Applies to: 'table' and 'inline-table' elements
Inherited: Yes
Computed value: As specified
Animatable: No
JavaScript syntax: object.style.borderCollapse

Interactive Demo

border-collapse: collapse;

border-collapse: separate;

Bananas	5 Dollars
Bananas	10 Dollars
Oranges	2 Dollars
Grapes	3 Dollars

Syntax

border-collapse: collapse | separate

Values

collapseIs a keyword requesting the use of the collapsed-border table rendering model.
seperateIs a keyword requesting the use of the separated-border table rendering model.

Example

HTML

<table class="test"> 

   <caption>border-collapse: collapse;</caption> 

   <tr> 

      <th>Name</th> <th>Price</th> 

   </tr> 

   <tr> 

      <td>Item 1</td> <td>Value 1</td> 

   </tr> 

   <tr> 

      <td>Item 2</td> <td>Value 2</td> 

   </tr> 

</table> 

<table class="test2"> 

   <caption>border-collapse: separate;</caption> 

   <tr> 

      <th> Name </th> <th> Price </th> 

   </tr> 

   <tr> 

      <td>Item 1</td> <td>Value 1</td> 

   </tr> 

   <tr> 

      <td>Item 2</td> <td>Value 2</td> 

   </tr> 

</table>

CSS

table {
   width: 80%;
   margin: 20px;
}
td, th {
   border: 1px solid blue;
}
.test {
   border-collapse: collapse; 
}
.test2 {
   border-collapse: separate; 
}

Result

Editor