Esta clase acepta mucho valor en Tailwind CSS en el que todas las propiedades están cubiertas en forma de clase. Esta clase se usa para establecer los bordes de la celda presente dentro de la tabla e indica si estas celdas compartirán un borde común o no. En CSS, podemos hacerlo usando la propiedad border-collapse de CSS .
Sintaxis:
<element class="border-collapse">...</element>
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center mx-4 space-y-2"> <h1 class="text-green-600 text-5xl font-bold"> GeeksforGeeks </h1> <b>Tailwind CSS Border Collapse Class</b> <div class="grid grid-flow-col text-center p-2"> <table class="border-Collapse border border-green-900"> <thead> <tr> <th class="border border-green-600">Frameworks</th> <th class="border border-green-600">Release Year</th> </tr> </thead> <tbody> <tr> <td class="border border-green-600">Tailwind CSS</td> <td class="border border-green-600">2019</td> </tr> <tr> <td class="border border-green-600">Bulma</td> <td class="border border-green-600">2016</td> </tr> <tr> <td class="border border-green-600">Bootstrap</td> <td class="border border-green-600">2011</td> </tr> </tbody> </table> </div> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA