Utilities for controlling whether table borders should collapse or be separated
| Class | Properties | |
|---|---|---|
| border-collapse | border-collapse: collapse; | |
| border-separate | border-collapse: separate; | |
Use border-separate to force each cell to display its own separate borders.
| State | City |
|---|---|
| Indiana | Indianapolis |
| Ohio | Columbus |
| Michigan | Detroit |
<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>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.
| State | City |
|---|---|
| Indiana | Indianapolis |
| Ohio | Columbus |
| Michigan | Detroit |
<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>v1.13.5