Tailwind CSS - Border Collapse

Tailwind’s border collapse utilities control how borders of adjacent cells in a table are rendered. You can choose to either merge them into a single border or keep them separate.

Border Collapse Classes

These utilities control the border-collapse CSS property.

Class	CSS Properties
border-collapse	border-collapse: collapse;
border-separate	border-collapse: separate;

Functionality Explained

border-collapse: This is the most common choice for modern data tables. It collapses adjacent cell borders into a single, shared border, creating a clean and compact look.
border-separate: This class keeps each cell’s border distinct. When using this, you can also control the space between these borders with the border-spacing-* utilities (e.g., border-spacing-x-2, border-spacing-y-4).

Example: Collapsed Borders for a Data Table

Using border-collapse is ideal for creating clean, modern data tables. Notice how the borders between the cells merge seamlessly.

<div class="p-8 bg-gray-100 dark:bg-slate-900">
  <div class="overflow-x-auto shadow-md rounded-lg">
    <table class="w-full text-sm text-left text-gray-500 dark:text-gray-400 border-collapse">
      <thead class="text-xs text-gray-700 uppercase bg-gray-200 dark:bg-slate-700 dark:text-gray-300">
        <tr>
          <th scope="col" class="px-6 py-3 border border-slate-300 dark:border-slate-600">Framework</th>
          <th scope="col" class="px-6 py-3 border border-slate-300 dark:border-slate-600">Primary Use</th>
        </tr>
      </thead>
      <tbody>
        <tr class="bg-white dark:bg-slate-800">
          <td class="px-6 py-4 border border-slate-300 dark:border-slate-600">React</td>
          <td class="px-6 py-4 border border-slate-300 dark:border-slate-600">Front-End UI Libraries</td>
        </tr>
        <tr class="bg-gray-50 dark:bg-slate-800/50">
          <td class="px-6 py-4 border border-slate-300 dark:border-slate-600">Node.js</td>
          <td class="px-6 py-4 border border-slate-300 dark:border-slate-600">Server-Side JavaScript</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Example: Separated Borders with Spacing

When using border-separate, the borders do not merge. This allows you to introduce space between cells using the border-spacing-* utilities, which can be useful for creating a card-like layout for table rows.

<div class="p-8 bg-gray-100 dark:bg-slate-900">
  <div class="overflow-x-auto">
    <table class="w-full border-separate border-spacing-y-2">
      <thead class="text-xs text-gray-700 uppercase dark:text-gray-300">
        <tr>
          <th scope="col" class="px-6 py-3 text-left">User</th>
          <th scope="col" class="px-6 py-3 text-left">Status</th>
        </tr>
      </thead>
      <tbody>
        <tr class="bg-white dark:bg-slate-800 shadow-sm rounded-lg">
          <td class="px-6 py-4 font-medium text-gray-900 dark:text-white">Alex Johnson</td>
          <td class="px-6 py-4 text-green-500">Active</td>
        </tr>
        <tr class="bg-white dark:bg-slate-800 shadow-sm rounded-lg">
          <td class="px-6 py-4 font-medium text-gray-900 dark:text-white">Maria Garcia</td>
          <td class="px-6 py-4 text-red-500">Inactive</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>