Choose a layout

caption-side

Report an Issue

	Class	Description
caption-top Sets caption-side: top. Places the table caption above the table. CSS Rules `.caption-top { caption-side: top; }` Usage `<element class="caption-top" />` Responsive Prefix `.caption-top` utility with a breakpoint variant (e.g., `md:`) to apply styles at specific screen sizes (Supported breakpoints are `xm` through `2xl`). `<element class="md:caption-top" />` States States are generated dynamically at runtime and always come last. Append a state like `:hover` or `:focus` to the end of the class. This works in conjunction with breakpoints . Supported pseudo-classes: `:hover`, `:active`, `:focus`, `:focus-visible`, `:focus-within`, `:target`, `:checked`, `:disabled`, and `:group-hover`. `<element class="caption-top:hover" />` Group Hover Example The `:group-hover` state applies styles when a parent element with the `.group` class is hovered. `<element class="group"> <element class="caption-top:group-hover">...</element> </element>` Pseudo-Elements The `::before` and `::after` utility classes are supported too. Granted that you add the mandatory `content-before` or `content-after` class in order for them to work. `<element class="content-before caption-top::before" /> <element class="content-after caption-top::after" />`	`.caption-top`	Sets caption-side: top. Places the table caption above the table.
caption-bottom Sets caption-side: bottom. Places the table caption below the table. CSS Rules `.caption-bottom { caption-side: bottom; }` Usage `<element class="caption-bottom" />` Responsive Prefix `.caption-bottom` utility with a breakpoint variant (e.g., `md:`) to apply styles at specific screen sizes (Supported breakpoints are `xm` through `2xl`). `<element class="md:caption-bottom" />` States States are generated dynamically at runtime and always come last. Append a state like `:hover` or `:focus` to the end of the class. This works in conjunction with breakpoints . Supported pseudo-classes: `:hover`, `:active`, `:focus`, `:focus-visible`, `:focus-within`, `:target`, `:checked`, `:disabled`, and `:group-hover`. `<element class="caption-bottom:hover" />` Group Hover Example The `:group-hover` state applies styles when a parent element with the `.group` class is hovered. `<element class="group"> <element class="caption-bottom:group-hover">...</element> </element>` Pseudo-Elements The `::before` and `::after` utility classes are supported too. Granted that you add the mandatory `content-before` or `content-after` class in order for them to work. `<element class="content-before caption-bottom::before" /> <element class="content-after caption-bottom::after" />`	`.caption-bottom`	Sets caption-side: bottom. Places the table caption below the table.