border-collapse

Definition

The border-collapse CSS property determines whether a table’s borders are separated or collapsed. In a separated model, each cell has its individual borders, while in a collapsed model, adjacent table cells share borders.

For example, to set a table’s borders to collapse, use border-collapse: collapse;. This can make your tables look cleaner and more compact.

Syntax

table {
  border-collapse: collapse;
}

Values

separate: draw borders around each cell with spacing (default).
collapse: merge adjacent cell borders into a single line.

Practical Examples

table.schedule {
  width: 100%;
  border-collapse: collapse;
}

Collapsed tables create a single grid line between cells, matching spreadsheet aesthetics.

HTML

border-collapse: separate

Team	Points
North	42
South	38

border-collapse: collapse

Team	Points
North	42
South	38

Code

<div class="grid gap-4 sm:grid-cols-2">
  <div class="rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
    <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">border-collapse: separate</p>
    <table class="w-full text-left text-sm" style="border-collapse: separate; border-spacing: 0.5rem;">
      <thead class="text-xs uppercase text-slate-500"><tr><th class="font-semibold">Team</th><th class="font-semibold">Points</th></tr></thead>
      <tbody class="text-slate-700">
        <tr class="bg-slate-100"><td class="rounded-lg px-3 py-2">North</td><td class="rounded-lg px-3 py-2 text-right">42</td></tr>
        <tr class="bg-slate-50"><td class="rounded-lg px-3 py-2">South</td><td class="rounded-lg px-3 py-2 text-right">38</td></tr>
      </tbody>
    </table>
  </div>
  <div class="rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
    <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">border-collapse: collapse</p>
    <table class="w-full text-left text-sm" style="border-collapse: collapse;">
      <thead class="bg-slate-100 text-xs uppercase text-slate-500"><tr><th class="border border-slate-200 px-3 py-2 font-semibold">Team</th><th class="border border-slate-200 px-3 py-2 font-semibold">Points</th></tr></thead>
      <tbody class="text-slate-700">
        <tr><td class="border border-slate-200 px-3 py-2">North</td><td class="border border-slate-200 px-3 py-2 text-right">42</td></tr>
        <tr class="bg-slate-50"><td class="border border-slate-200 px-3 py-2">South</td><td class="border border-slate-200 px-3 py-2 text-right">38</td></tr>
      </tbody>
    </table>
  </div>
</div>

Tips & Best Practices

Use collapse for dense data tables; pair with border-bottom accent rows for readability.
When keeping separate, leverage border-spacing for controlled gaps between cells.
Remember that border-radius on table elements behaves differently when collapsed—apply to individual cells as needed.

Accessibility & UX Notes

Ensure table headers remain visually distinct regardless of collapse mode; use <th> and scope attributes for semantics.

Browser Support

Fully supported in major browsers. Some legacy browsers handle collapsed border radii inconsistently.

border-spacing to adjust gaps when using separate mode.
table-layout for consistent column sizing.
border longhands to style individual cell edges.