Caption Side

Controls the caption element orientation in a table.

Class	Style
`cs-t`	`caption-side: top`
`cs-b`	`caption-side: bottom`

Top

Initial value

The caption will be displayed above the table.

<table class="b-1 bc-c bc-indigo ta-c w-full">
  <caption class="cs-t p-2">
    Top Caption
  </caption>
  <tbody>
    <tr>
      <td class="b-1 bc-indigo p-3 tc-indigo">A</td>
      <td class="b-1 bc-indigo p-3 tc-indigo">B</td>
      <td class="b-1 bc-indigo p-3 tc-indigo">C</td>
    </tr>
  </tbody>
</table>

Bottom

The caption will be displayed below the table.

<table class="b-1 bc-c bc-indigo ta-c w-full">
  <caption class="cs-b p-2">
    Bottom Caption
  </caption>
  <tbody>
    <tr>
      <td class="b-1 bc-indigo p-3 tc-indigo">A</td>
      <td class="b-1 bc-indigo p-3 tc-indigo">B</td>
      <td class="b-1 bc-indigo p-3 tc-indigo">C</td>
    </tr>
  </tbody>
</table>

Using utility variants

Learn how to override existing utilities based on the user's screen size or other factors, such as hover states.

Using media queries

You can combine responsive breakpoints like sm:cs-*, md:cs-*, lg:cs-*, and xxl:cs-* to allow targeting specific utilities in different viewports.

Using hover states

Alternatively, you can apply :hover by using h:cs-* utility to override elements and change their values when hovering over them.