How to Use Border Collapse in CSS

Use border-collapse when you want table borders to merge into clean single lines instead of showing doubled edges between cells. This is one of the most important table cleanup properties in CSS.

What you’ll build or solve

You’ll learn how to use border-collapse in CSS to make table borders look cleaner. You’ll also know when collapsed borders improve readability the most.

When this approach works best

This approach is the right choice when your table borders look doubled, messy, or too visually heavy.

Common real-world scenarios include:

• Pricing comparison tables
• Analytics reports
• Grade sheets
• Product matrices
• Scheduling grids

This is a bad idea when the design intentionally uses separated cells with spacing between them.

Prerequisites

You only need:

• A basic HTML table with borders
• A text editor
• Basic HTML and CSS knowledge

Step-by-step instructions

Step 1: Apply border-collapse: collapse to the table

Start with a bordered table.

<table class="pricing">
  <tr>
    <th>Country</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>USA</td>
    <td>$29</td>
  </tr>
</table>

<style>
  .pricing,
  .pricing th,
  .pricing td {
    border: 1px solid #ddd;
  }
</style>

Then collapse the borders on the table itself.

<style>
  .pricing {
    border-collapse: collapse;
  }
</style>

What to look for:

• Borders between cells become single lines
• The property belongs on the <table>, not the cells
• Cell borders still need their own border values
• Collapsed borders improve readability for dense tables
• Use separated borders only when spacing between cells is intentional

Examples you can copy

Pricing table

<table class="plans">
  <tr>
    <th>Region</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>UK</td>
    <td>£25</td>
  </tr>
</table>

<style>
  .plans {
    border-collapse: collapse;
  }
</style>

Analytics table

<table class="metrics">
  <tr>
    <th>Country</th>
    <th>CTR</th>
  </tr>
  <tr>
    <td>France</td>
    <td>4.2%</td>
  </tr>
</table>

<style>
  .metrics {
    border-collapse: collapse;
  }
</style>

Launch schedule

<table class="schedule">
  <tr>
    <th>Market</th>
    <th>Date</th>
  </tr>
  <tr>
    <td>USA</td>
    <td>Monday</td>
  </tr>
</table>

<style>
  .schedule {
    border-collapse: collapse;
  }
</style>

Common mistakes and how to fix them

Mistake 1: Applying border-collapse to cells

What the reader might do:

td,
th {
  border-collapse: collapse;
}

Why it breaks: the property only works on the table element.

Corrected approach:

table {
  border-collapse: collapse;
}

Mistake 2: Forgetting actual borders

What the reader might do:

table {
  border-collapse: collapse;
}

Why it breaks: without cell borders, there is nothing to collapse.

Corrected approach:

table,
th,
td {
  border: 1px solid #ddd;
}

Mistake 3: Using collapse when cell spacing is required

What the reader might do:

table {
  border-collapse: collapse;
}

Why it breaks: separated card-like cells lose their intentional spacing.

Corrected approach:

Skip collapse and use border-spacing if visible gaps between cells are part of the design.

Troubleshooting

If borders still look doubled, confirm border-collapse is applied to the table selector.

If nothing changes, add borders to th and td.

If the table loses intended spacing, switch to separated borders.

If the layout still feels heavy, use lighter border colors.

Quick recap

• Use border-collapse: collapse on the table
• Keep borders on cells
• Collapse removes doubled edges
• Use separated borders only for intentional spacing
• Great for readable dense tables