border-collapse

by

The border-collapse property controls how borders of adjacent table cells are merged.

Adjacent table cells will merge their borders together.

The cell that appears first in the code will “win”: its borders will mask those of the following cells.

It has two possible values:

  • collapse: Merges adjacent cell borders into a single border.
  • separate: Keeps adjacent cell borders separate.

Usage

  • Apply to a table element:
    • Set the border-collapse property on the <table> element itself.
    • This will affect the borders of all cells within the table.
table {
    border-collapse: collapse;
}
  • Customize border styles:
    • Use the border shorthand property or its individual components (border-width, border-style, border-color) to style the merged borders.
table {
    border-collapse: collapse;
    border: 1px solid black;
}

Examples

Separate borders

<table>
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
    </tr>
    <tr>
        <td>Cell 3</td>
        <td>Cell 4</td>
    </tr>
</table>
table {
    border-collapse: separate;
    border: 1px solid black;
}

Collapsed borders

<table>
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
    </tr>
    <tr>
        <td>Cell 3</td>
        <td>Cell 4</td>
    </tr>
</table>
table {
    border-collapse: collapse;
    border: 1px solid black;
}

Additional considerations

  • The border-spacing property can be used to add space between collapsed borders.
  • For more complex border styling, consider using CSS Grid or Flexbox.

Key points to remember:

  • border-collapse is a valuable tool for creating clean and consistent table borders.
  • It can significantly improve the visual appearance of your tables.
  • Experiment with different values and styles to achieve the desired effect.