Tablas
Utilidades para controlar si los bordes de la tabla deben colapsar o separarse.
| Clase | Estilos |
|---|---|
border-collapse | border-collapse: collapse; |
border-separate | border-collapse: separate; |
Utiliza 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 colapsar los bordes en la etiqueta <table> de nivel superior.
Utiliza 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>Antepone a la utilidad border-collapse el prefijo de una variante de punto de ruptura como md: para aplicar la utilidad únicamente en tamaños de pantalla mediano y superiores:
<table class="border-collapse md:border-separate ..."> <!-- ... --></table>Obtén más información sobre el uso de variantes en la documentación de variantes.