totn CSS

CSS: border-collapse property

This CSS tutorial explains how to use the CSS property called border-collapse with syntax and examples.

Description

The CSS border-collapse property defines the rendering model to use for the table borders which affects the table's appearance.

Syntax

The syntax for the border-collapse CSS property is:

border-collapse: value;

Parameters or Arguments

value

The rendering model to apply to the table borders. It can be one of the following:

Value Description
separate Use the separated borders model to render the table borders
table { border-collapse: separate; }
collapse Use the collapsed borders model to render the table borders
table { border-collapse: collapse; }
inherit Element will inherit the border-collapse from its parent element
table { border-collapse: inherit; }

Note

  • The border-collapse property applies to the <table> element and the default is separate.
  • The separated borders model renders a table such that adjacent cells have their own borders that are not shared, and the border-spacing property determines the spacing between the cells.
  • The collapsed borders model renders a table such that adjacent cells share their borders.

Browser Compatibility

The CSS border-collapse property has basic support with the following browsers:

  • Chrome
  • Firefox (Gecko)
  • Internet Explorer 5+ (IE 5+)
  • Opera
  • Safari (WebKit)

Example

We will discuss the border-collapse property below, exploring examples of how to use this property in CSS.

Let's first look at an example of where we apply the separated borders model to our table. For example:

The CSS would look like this:

table { border-collapse: separate; border: 1px solid red; }

th { border: 1px solid blue; }

td { border: 1px solid black; }

The HTML would look like this:

<table>
  <tr>
    <th>Column 1 Heading</th>
    <th>Column 2 Heading</th>
  </tr>
  <tr>
    <td>techonthenet.com</td>
    <td>Technical reference site</td>
  </tr>
  <tr>
    <td>checkyourmath.com</td>
    <td>Math calculation site</td>
  </tr>
  <tr>
    <td>bigactivities.com</td>
    <td>Kids activity site</td>
  </tr>
</table>

The table using the separated borders model would look like this:

CSS

In this CSS border-collapse example, we have set the border-collapse property to a value of separate for the <table> tag which renders the table using the separated borders model (default for HTML tables). As you can see, the adjacent cells have their own distinct borders.

Now we will change our table to use the collapsed borders model by changing the border-collapse property to collapse and see what happens:

table { border-collapse: collapse; border: 1px solid red; }

th { border: 1px solid blue; }

td { border: 1px solid black; }

Now using the collapsed borders model, our table would look like this:

CSS

As you can see, our table is rendered using the collapsed borders model which results in the adjacent cells sharing their borders. This can reduce the whitespace between the table cells and remove some of the table border styling since the borders are now shared.