Tablas
Utilidades para controlar si los bordes de la tabla deben colapsar o estar separados.
| Clase | Estilos |
|---|---|
border-collapse | border-collapse: collapse; |
border-separate | border-collapse: separate; |
Usa la utilidad border-collapse para combinar bordes de celdas adyacentes en un solo borde cuando sea posible:
| Estado | Ciudad |
|---|---|
| Indiana | Indianapolis |
| Ohio | Columbus |
| Michigan | Detroit |
<table class="border-collapse border border-gray-400 ..."> <thead> <tr> <th class="border border-gray-300 ...">Estado</th> <th class="border border-gray-300 ...">Ciudad</th> </tr> </thead> <tbody> <tr> <td class="border border-gray-300 ...">Indiana</td> <td class="border border-gray-300 ...">Indianapolis</td> </tr> <tr> <td class="border border-gray-300 ...">Ohio</td> <td class="border border-gray-300 ...">Columbus</td> </tr> <tr> <td class="border border-gray-300 ...">Michigan</td> <td class="border border-gray-300 ...">Detroit</td> </tr> </tbody></table>Ten en cuenta que esto incluye el colapso de los bordes en la etiqueta <table> de nivel superior.
Usa la utilidad border-separate para forzar a cada celda a mostrar sus propios bordes separados:
| Estado | Ciudad |
|---|---|
| Indiana | Indianapolis |
| Ohio | Columbus |
| Michigan | Detroit |
<table class="border-separate border border-gray-400 ..."> <thead> <tr> <th class="border border-gray-300 ...">Estado</th> <th class="border border-gray-300 ...">Ciudad</th> </tr> </thead> <tbody> <tr> <td class="border border-gray-300 ...">Indiana</td> <td class="border border-gray-300 ...">Indianapolis</td> </tr> <tr> <td class="border border-gray-300 ...">Ohio</td> <td class="border border-gray-300 ...">Columbus</td> </tr> <tr> <td class="border border-gray-300 ...">Michigan</td> <td class="border border-gray-300 ...">Detroit</td> </tr> </tbody></table>Prefija una utilidad border-collapse con una variante de breakpoint como md: para aplicar la utilidad solo en tamaños de pantalla medium y superiores:
<table class="border-collapse md:border-separate ..."> <!-- ... --></table>Aprende más sobre el uso de variantes en la documentación de variantes.