Tailwind CSS Tables Referencia completa

Tailwind CSS es un marco CSS de bajo nivel altamente personalizable que le brinda todos los componentes básicos que necesita. Tailwind CSS Tables configura los elementos de la tabla como diseños de tabla, bordes. 

Eso proporciona clases como Border Collapse, Table layout para mantener fácilmente las tablas.

El siguiente ejemplo le dará una breve idea sobre las tablas de Tailwind CSS:

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 Table Layout Class</b>
    <div class="bg-green-200">
        <table class="table-auto border-separate border border-green-900">
        <thead>
        <tr>
            <th class="border border-green-600">Frameworks</th>
            <th class="border border-green-600">About</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td class="border border-green-600">Tailwind CSS</td>
            <td class="border border-green-600">
                Tailwind CSS is a highly customizable,
                low-level CSS framework that gives you all
                of the building blocks
            </td>
        </tr>
        <tr>
            <td class="border border-green-600">Bulma</td>
            <td class="border border-green-600">
                Bulma CSS by @jgthms is just perfect.
                Simple, easily customizable and doesn't
                impose Javascript implementations.
            </td>
        </tr>
        <tr>
            <td class="border border-green-600">Bootstrap</td>
            <td class="border border-green-600">
                Bootstrap is a free and open-source CSS
                framework directed at responsive, mobile-first
                front-end web development.
            </td>
        </tr>
        </tbody>
        </table>
    </div>
</body>
  
</html>

Producción:

 

Publicación traducida automáticamente

Artículo escrito por GeeksforGeeks-1 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *