CSS border-collapse Property

Description

The border-collapse property sets how to display borders around table cells (stand-alone borders, or borders are merged into one, when possible).

Initial value

seperate

Applies to

'table' and 'inline-table' elements

Inherited

Yes

Media

Visual

Computed value

As specified

Animatable

No

CSS Version

CSS2, CSS3

JavaScript syntax

object.style.borderCollapse

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

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

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

Browser Support

Desktop
5	12	1	1	4	1.2
Tablets / Mobile
2.2	18	4	10.1	3	1.0

Last updated by CSSPortal on: 12th October 2019