border-collapse

Definition

The border-collapse property is a CSS property that sets the border collapsing behavior of a table. It is used specifically with the table element.

Examples

This will create a table with a solid, 1 pixel wide, red border and cells with solid, 1 pixel wide, blue borders. The cells will be separated by the blue borders:

<style>
  table {
    border: 1px solid #ff0000;
  }
  td {
    border: 1px solid #0000ff;
  }
</style>

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

This will create a table with a solid, 1 pixel wide, red border and cells with solid, 1 pixel wide, blue borders. The cells will be separated by the red border, which will be collapsed to a single border:

<style>
  table {
    border: 1px solid #ff0000;
    border-collapse: collapse;
  }
  td {
    border: 1px solid #0000ff;
  }
</style>

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

This will create a table with a solid, 1 pixel wide, red border and cells with solid, 1 pixel wide, blue borders. The cells will be separated by the blue borders, and the red border will not be collapsed:

<style>
  table {
    border: 1px solid #ff0000;
    border-collapse: separate;
  }
  td {
    border: 1px solid #0000ff;
  }
</style>

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

Values

Best Practices

• Use the border-collapse property in conjunction with the border property to fully define the borders of a table.
• Consider the layout and design of your table when deciding whether to use the collapse or separate value.
• Use the collapse value if you want to create a more compact and streamlined layout for your table.
• Use the separate value if you want to create a more traditional table layout with individual cell borders.
• Keep in mind that the border-collapse property only affects the borders of the cells in a table and not the border of the table itself. To set the border of the table, you can use the border property.

Browser Compatibility