Caption Side
Controls the caption element orientation in a table.
Utility | Properties |
---|---|
cs-t | caption-side: top; |
cs-b | caption-side: bottom; |
Bottom
This example sets the caption side to bottom. The caption will be displayed below the table.
A | B | C |
<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>
Top
This example sets the caption side to top. The caption will be displayed above the table.
A | B | C |
<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>
Conditional styles
Learn how to override existing utilities based on the user's screen size or other factors, such as hover states.
Media modifiers
You can combine responsive breakpoints like sm:cs-*
,md:cs-*
, lg:cs-*
, and xxl:cs-*
allows targeting specific utilities in different viewports.
<div class="cs-b md:cs-t ..."></div>
Hover modifiers
Alternatively, you can apply :hover
by using h:cs-*
utility to override elements and change their values when hovering over them.
<div class="cs-b h:cs-t ..."></div>