Sections

Border collapse

Utilities for controlling whether table borders should collapse or be separated.

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

Usage

Use .border-collapse to combine adjacent cell borders into a single border when possible, including the borders on the top-level <table> tag.

First name Last name
John Doe
Jane Doe
<table class="table table-bordered border-collapse">
  <tr>
    <th class="border">First name</th>
    <th class="border">Last name</th>
  </tr>
  <tr>
    <td class="border">John</td>
    <td class="border">Doe</td>
  </tr>
  <tr>
    <td class="border">Jane</td>
    <td class="border">Doe</td>
  </tr>
</table>

This behavior is applied by default as part of the framework’s base styles.

Use .border-separate to force each cell to display its own separate borders.

First name Last name
John Doe
Jane Doe
<table class="table table-bordered border-separate">
  <tr>
    <th class="border">First name</th>
    <th class="border">Last name</th>
  </tr>
  <tr>
    <td class="border">John</td>
    <td class="border">Doe</td>
  </tr>
  <tr>
    <td class="border">Jane</td>
    <td class="border">Doe</td>
  </tr>
</table>

Variants

By default, no responsive or hover-state variants are generated for border collapse utilities.

Responsive

To include responsive variants like .md:border-separate, add "border-collapse to the $responsive-variants variable in your theme’s _variables.scss file when recompiling your CSS:

$responsive-variants: (
  // ...
  "border-collapse",
);

Hover-state

To include hover-state variants like .hover:border-separate, add "border-collapse" to the $hover-variants variable:

$hover-variants: (
  // ...
  "border-collapse",
);