Tag border-spacing

📐 CSS border-spacing: Controlling Space Between Table Cells

In HTML tables, layout precision matters. The border-spacing property in CSS allows you to control the amount of space between adjacent table cells when using border-collapse: separate. This helps create neat, well-spaced tables or unique designs that break the default tight grid look.

🧾 What is border-spacing?

border-spacing sets the horizontal and vertical space between the borders of adjacent table cells. It applies only when border-collapse is set to separate, which is the default behavior for HTML tables.

🧬 Syntax

table {
  border-spacing: <length>;
  /* or */
  border-spacing: <horizontal> <vertical>;
}

Accepted units:

  • Pixels (px)
  • em/rem (em, rem)
  • Percentages are not supported

🧪 Value Patterns

FormatDescription
border-spacing: 10px;Sets both horizontal and vertical spacing to 10px
border-spacing: 15px 5px;Sets horizontal spacing to 15px and vertical spacing to 5px

🎯 Examples

1. Uniform spacing between table cells

table {
  border-collapse: separate;
  border-spacing: 10px;
  border: 1px solid #ccc;
}

Adds 10px of space between all table cells, creating a “grid gap” effect.

2. Asymmetrical spacing (horizontal ≠ vertical)

table {
  border-collapse: separate;
  border-spacing: 20px 5px;
}

Creates 20px space between columns and 5px between rows.

3. No spacing (useful for tight tables)

table {
  border-collapse: separate;
  border-spacing: 0;
}

Removes any gap between cells while still using separate borders.

🔍 Important Notes

  • Only works when border-collapse is set to separate (which is the default).
  • It does not work with border-collapse: collapse.
  • The space created is outside the cell content but inside the table layout.
  • Does not affect padding inside individual cells — use padding for that.

🛠️ Best Practices

  • Use border-spacing for tables that need clear visual separation between cells.
  • Use asymmetric spacing to emphasize row vs. column layout (e.g., vertical lists).
  • Combine with background colors to create clean, modular table designs.
  • Reset it to 0 if you want to tightly control cell positioning in custom designs.

✅ Browser Support

Fully supported in all major browsers, including:

  • ✅ Chrome
  • ✅ Firefox
  • ✅ Safari
  • ✅ Edge
  • ✅ Internet Explorer 8+

🔚 Conclusion

The CSS border-spacing property gives you precision control over the gaps between table cells, making your tables more readable, aesthetically pleasing, and easier to style. Whether you’re crafting reports, data layouts, or dashboard tables, border-spacing helps you go beyond the default boxy look.