Diseño de tabla CSS de Tailwind

Esta clase acepta mucho valor en Tailwind CSS en el que todas las propiedades están cubiertas en forma de clase. Al usar esta clase, podemos configurar la visualización del diseño de la tabla. En CSS, lo hacemos usando la propiedad de diseño de tabla de CSS .

Clases de diseño de mesa:

  • mesa-auto
  • fijo en la mesa

table-auto: esta clase se usa para permitir que la tabla cambie automáticamente el tamaño de las columnas para que se ajusten al contenido de la celda.

Sintaxis:

<element class="table-auto">...</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 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:

Diseño de tabla CSS de Tailwind

table-fixed: esta clase se usa para permitir que la tabla ignore el contenido y use anchos fijos para las columnas. El ancho de la primera fila establecerá los anchos de columna para toda la tabla.

Sintaxis:

<element class="table-fixed">...</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 Table Layout Class</b> 
    <div class="bg-green-200"> 
        <table class="table-fixed border-separate border border-green-900">
        <thead>
          <tr>
            <th class="border border-green-600 w-1/4">Frameworks</th>
            <th class="border border-green-600 w-3/4">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:

Diseño CSS de viento de cola

Publicación traducida automáticamente

Artículo escrito por skyridetim 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 *