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.
Sintaxis:
<element class="border-separate">...</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 Separate Class</b> <div class="grid grid-flow-col text-center p-2"> <table class="border-separate 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:
Tailwind CSS Border clase separada
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA