Master CSS border-collapse: How to Design Clean and Modern Tables

By default, HTML tables can look a bit outdated, featuring awkward spaces between cells and double-bordered lines. If you want your data tables to look sleek, sharp, and professional, you need to master the CSS border-collapse property.

In this quick guide, you will learn how to instantly transform messy tables into modern, beautifully organized data layouts.

The border-collapse property determines whether the borders of an HTML <table> element and its cells (<td>, <th>) are separated or merged into a single, unified line.

Simply put: It controls whether your table cells have their own individual borders or share a single border with their neighbors.

This property has two primary values that completely change the visual structure of your tables:

Every single cell retains its own distinct border, which often results in a "double border" look. When using this value, you can also use the border-spacing property to control the distance between cell borders.

Best Used For: Retro or card-style tables where you want cells to look like independent elements or blocks floating next to each other.

table {
  border-collapse: separate;
}
                

Adjacent cell borders automatically merge into a single, clean line. The browser removes all spacing between cells, creating a compact and highly readable grid.

Best Used For: Modern pricing tables, analytics dashboards, and responsive data sheets. This is the ultimate industry standard for clean UI design.

table {
  border-collapse: collapse;
}