table-layout

table-layout

Utilidades para controlar el algoritmo de diseño de tabla.

Clase Estilos

Clase	Estilos
`table-auto`	`table-layout: auto;`
`table-fixed`	`table-layout: fixed;`

table-auto

table-layout: auto;

table-fixed

table-layout: fixed;

Ejemplos

Dimensionando columnas automáticamente

Usa la utilidad table-auto para dimensionar automáticamente las columnas de la tabla para que se ajusten al contenido de sus celdas:

Canción	Artista	Año
The Sliding Mr. Bones (Next Stop, Pottersville)	Malcolm Lockyer	1961
Witchy Woman	The Eagles	1972
Shining Star	Earth, Wind, and Fire	1975

<table class="table-auto">
  <thead>
    <tr>
      <th>Canción</th>
      <th>Artista</th>
      <th>Año</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>The Sliding Mr. Bones (Next Stop, Pottersville)</td>
      <td>Malcolm Lockyer</td>
      <td>1961</td>
    </tr>
    <tr>
      <td>Witchy Woman</td>
      <td>The Eagles</td>
      <td>1972</td>
    </tr>
    <tr>
      <td>Shining Star</td>
      <td>Earth, Wind, and Fire</td>
      <td>1975</td>
    </tr>
  </tbody>
</table>

Usando anchos de columna fijos

Usa la utilidad table-fixed para ignorar el contenido de las celdas de la tabla y usar anchos fijos para cada columna:

Canción	Artista	Año
The Sliding Mr. Bones (Next Stop, Pottersville)	Malcolm Lockyer	1961
Witchy Woman	The Eagles	1972
Shining Star	Earth, Wind, and Fire	1975

<table class="table-fixed">
  <thead>
    <tr>
      <th>Canción</th>
      <th>Artista</th>
      <th>Año</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>The Sliding Mr. Bones (Next Stop, Pottersville)</td>
      <td>Malcolm Lockyer</td>
      <td>1961</td>
    </tr>
    <tr>
      <td>Witchy Woman</td>
      <td>The Eagles</td>
      <td>1972</td>
    </tr>
    <tr>
      <td>Shining Star</td>
      <td>Earth, Wind, and Fire</td>
      <td>1975</td>
    </tr>
  </tbody>
</table>

Puedes establecer manualmente los anchos para algunas columnas y el resto del ancho disponible se dividirá equitativamente entre las columnas sin un ancho explícito. Los anchos establecidos en la primera fila establecerán el ancho de columna para toda la tabla.

Responsive design

Prefija una utilidad table-layout con una variante de breakpoint como md: para aplicar la utilidad solo en tamaños de pantalla medium y superiores:

<div class="table-none md:table-fixed ...">
  <!-- ... -->
</div>

Aprende más sobre el uso de variantes en la documentación de variantes.

Ejemplos

Dimensionando columnas automáticamente

Usando anchos de columna fijos

Responsive design

En esta página