1. Tablas
  2. caption-side

Tablas

caption-side

Utilidades para controlar la alineación de un elemento de título (caption) dentro de una tabla.

ClaseEstilos
caption-top
caption-side: top;
caption-bottom
caption-side: bottom;

Ejemplos

Colocar en la parte superior de la tabla

Utiliza la utilidad caption-top para posicionar un elemento de título en la parte superior de una tabla:

Tabla 3.1: Luchadores profesionales y sus movimientos característicos.
LuchadorMovimiento(s) característico(s)
"Stone Cold" Steve AustinStone Cold Stunner, Lou Thesz Press
Bret "The Hitman" HartThe Sharpshooter
Razor RamonRazor's Edge, Fallaway Slam
<table>  <caption class="caption-top">    Tabla 3.1: Luchadores profesionales y sus movimientos característicos.  </caption>  <thead>    <tr>      <th>Luchador</th>      <th>Movimiento(s) característico(s)</th>    </tr>  </thead>  <tbody>    <tr>      <td>"Stone Cold" Steve Austin</td>      <td>Stone Cold Stunner, Lou Thesz Press</td>    </tr>    <tr>      <td>Bret "The Hitman" Hart</td>      <td>The Sharpshooter</td>    </tr>    <tr>      <td>Razor Ramon</td>      <td>Razor's Edge, Fallaway Slam</td>    </tr>  </tbody></table>

Colocar en la parte inferior de la tabla

Utiliza la utilidad caption-bottom para posicionar un elemento de título en la parte inferior de una tabla:

Tabla 3.1: Luchadores profesionales y sus movimientos característicos.
LuchadorMovimiento(s) característico(s)
"Stone Cold" Steve AustinStone Cold Stunner, Lou Thesz Press
Bret "The Hitman" HartThe Sharpshooter
Razor RamonRazor's Edge, Fallaway Slam
<table>  <caption class="caption-bottom">    Tabla 3.1: Luchadores profesionales y sus movimientos característicos.  </caption>  <thead>    <tr>      <th>Luchador</th>      <th>Movimiento(s) característico(s)</th>    </tr>  </thead>  <tbody>    <tr>      <td>"Stone Cold" Steve Austin</td>      <td>Stone Cold Stunner, Lou Thesz Press</td>    </tr>    <tr>      <td>Bret "The Hitman" Hart</td>      <td>The Sharpshooter</td>    </tr>    <tr>      <td>Razor Ramon</td>      <td>Razor's Edge, Fallaway Slam</td>    </tr>  </tbody></table>

Diseño responsivo

Antepone a la utilidad caption-side el prefijo de una variante de punto de ruptura como md: para aplicar la utilidad únicamente en tamaños de pantalla mediano y superiores:

<caption class="caption-top md:caption-bottom ...">  <!-- ... --></caption>

Obtén más información sobre el uso de variantes en la documentación de variantes.

Copyright © 2026 Tailwind Labs Inc.·Política de marcas registradas