CSS table border-collapse

The border-collapse property in CSS is used to control the collapsing of borders between adjacent table cells.

Syntax

table {
  border-collapse: value;
}

The possible values for border-collapse are:

• separate: This is the default value. Each cell has its own individual border, and the borders do not merge.
• collapse: The borders between adjacent cells are collapsed into a single border. The width of the collapsed border is the sum of the individual border widths.

Example

Consider the following HTML table:

<table>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
  <tr>
    <td>Cell 3</td>
    <td>Cell 4</td>
  </tr>
</table>

By applying the border-collapse property with different values, we can see the difference:

table {
  border-collapse: separate;
}

| separate | separate | | -------- | -------- | | separate | separate |

table {
  border-collapse: collapse;
}

| collapse | collapse | | ------------ | ------------ | | collapse | collapse |

Usage

The border-collapse property is commonly used when styling HTML tables. It allows you to control the appearance of table borders and achieve a desired layout.

By setting the value to collapse, you can merge borders between adjacent cells, providing a cleaner and more streamlined look to the table.

On the other hand, if you set the value to separate, each cell will have its own border, allowing for more customization of each individual cell's border style.

Browser Support

The border-collapse property is supported by all major web browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer.

However, note that Internet Explorer's default is collapse while other browsers default to separate. Therefore, if you want consistent border behavior across browsers, it is recommended to explicitly set the border-collapse property in your CSS.

Conclusion

The border-collapse property in CSS is a useful tool for controlling the collapsing of borders in HTML tables. Whether you want individual cell borders or merged borders, you can achieve the desired appearance by adjusting the value of this property.