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

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