caption-side

caption-side

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

Clase Estilos

Clase	Estilos
`caption-top`	`caption-side: top;`
`caption-bottom`	`caption-side: bottom;`

caption-top

caption-side: top;

caption-bottom

caption-side: bottom;

Ejemplos

Colocando en la parte superior de la tabla

Usa 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.
Luchador	Movimiento(s) característico(s)
"Stone Cold" Steve Austin	Stone Cold Stunner, Lou Thesz Press
Bret "The Hitman" Hart	The Sharpshooter
Razor Ramon	Razor'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>

Colocando en la parte inferior de la tabla

Usa 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.
Luchador	Movimiento(s) característico(s)
"Stone Cold" Steve Austin	Stone Cold Stunner, Lou Thesz Press
Bret "The Hitman" Hart	The Sharpshooter
Razor Ramon	Razor'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 Responsive

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

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

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

Ejemplos

Colocando en la parte superior de la tabla

Colocando en la parte inferior de la tabla

Diseño Responsive

En esta página