Border collapse

Utilities for controlling whether table borders should collapse or be separated


Class reference

ClassProperties
border-collapseborder-collapse: collapse;
border-separateborder-collapse: separate;

# Separate

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

StateCity
IndianaIndianapolis
OhioColumbus
MichiganDetroit
<table class="**border-separate** border border-green-800 ...">
<thead>
<tr>
<th class="border border-green-600 ...">State</th>
<th class="border border-green-600 ...">City</th>
</tr>
</thead>
<tbody>
<tr>
<td class="border border-green-600 ...">Indiana</td>
<td class="border border-green-600 ...">Indianapolis</td>
</tr>
<tr>
<td class="border border-green-600 ...">Ohio</td>
<td class="border border-green-600 ...">Columbus</td>
</tr>
<tr>
<td class="border border-green-600 ...">Michigan</td>
<td class="border border-green-600 ...">Detroit</td>
</tr>
</tbody>
</table>

# Collapse

Use border-collapse to combine adjacent cell borders into a single border when possible. Note that this includes collapsing borders on the top-level <table> tag.

StateCity
IndianaIndianapolis
OhioColumbus
MichiganDetroit
<table class="**border-collapse** border border-green-800 ...">
<thead>
<tr>
<th class="border border-green-600 ...">State</th>
<th class="border border-green-600 ...">City</th>
</tr>
</thead>
<tbody>
<tr>
<td class="border border-green-600 ...">Indiana</td>
<td class="border border-green-600 ...">Indianapolis</td>
</tr>
<tr>
<td class="border border-green-600 ...">Ohio</td>
<td class="border border-green-600 ...">Columbus</td>
</tr>
<tr>
<td class="border border-green-600 ...">Michigan</td>
<td class="border border-green-600 ...">Detroit</td>
</tr>
</tbody>
</table>