Tables

Border Collapse

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

Quick reference

Class
Properties
border-collapseborder-collapse: collapse;
border-separateborder-collapse: separate;

Basic usage

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.

Border Collapse - 图1

  1. <table class="border-collapse border border-gray-400 ...">
  2. <thead>
  3. <tr>
  4. <th class="border border-gray-300 ...">State</th>
  5. <th class="border border-gray-300 ...">City</th>
  6. </tr>
  7. </thead>
  8. <tbody>
  9. <tr>
  10. <td class="border border-gray-300 ...">Indiana</td>
  11. <td class="border border-gray-300 ...">Indianapolis</td>
  12. </tr>
  13. <tr>
  14. <td class="border border-gray-300 ...">Ohio</td>
  15. <td class="border border-gray-300 ...">Columbus</td>
  16. </tr>
  17. <tr>
  18. <td class="border border-gray-300 ...">Michigan</td>
  19. <td class="border border-gray-300 ...">Detroit</td>
  20. </tr>
  21. </tbody>
  22. </table>

Separate

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

Border Collapse - 图2

  1. <table class="border-separate border border-gray-400 ...">
  2. <thead>
  3. <tr>
  4. <th class="border border-gray-300 ...">State</th>
  5. <th class="border border-gray-300 ...">City</th>
  6. </tr>
  7. </thead>
  8. <tbody>
  9. <tr>
  10. <td class="border border-gray-300 ...">Indiana</td>
  11. <td class="border border-gray-300 ...">Indianapolis</td>
  12. </tr>
  13. <tr>
  14. <td class="border border-gray-300 ...">Ohio</td>
  15. <td class="border border-gray-300 ...">Columbus</td>
  16. </tr>
  17. <tr>
  18. <td class="border border-gray-300 ...">Michigan</td>
  19. <td class="border border-gray-300 ...">Detroit</td>
  20. </tr>
  21. </tbody>
  22. </table>

Applying conditionally

Hover, focus, and other states

Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:border-collapse to only apply the border-collapse utility on hover.

  1. <table class="hover:border-collapse">
  2. <!-- ... -->
  3. </table>

For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.

Breakpoints and media queries

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:border-collapse to apply the border-collapse utility at only medium screen sizes and above.

  1. <table class="md:border-collapse">
  2. <!-- ... -->
  3. </table>

To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.