Tablas
Utilidades para controlar el algoritmo de diseño de tablas.
| Clase | Estilos |
|---|---|
table-auto | table-layout: auto; |
table-fixed | table-layout: fixed; |
Usa la utilidad table-auto para ajustar automáticamente el tamaño de las columnas de la tabla 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>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 de 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 definirán el ancho de columna para toda la tabla.
Antepone a la utilidad table-layout el prefijo de una variante de punto de ruptura como md: para aplicar la utilidad únicamente en tamaños de pantalla mediano y superiores:
<div class="table-auto md:table-fixed ..."> <!-- ... --></div>Obtén más información sobre el uso de variantes en la documentación de variantes.