# Table ## Usage To apply this component, add the `.z-table` class to a `` element. ```html
``` ```html
Table Caption
Table Heading Table Heading Table Heading
Table Data Table Data Table Data
Table Data Table Data Table Data
Table Footer Table Footer Table Footer
``` ## Divider modifier Add the `.z-table-divider` class to display a divider between table rows. ```html
``` ```html
Table Heading Table Heading Table Heading
Table Data Table Data Table Data
Table Data Table Data Table Data
Table Data Table Data Table Data
``` ## Striped modifier Add zebra-striping to a table by adding the `.z-table-striped` class. ```html
``` ```html
Table Heading Table Heading Table Heading
Table Data Table Data Table Data
Table Data Table Data Table Data
Table Data Table Data Table Data
``` ## Hover modifier Add the `.z-table-hover` class to display a hover state on table rows. ```html
``` ```html
Table Heading Table Heading Table Heading
Table Data Table Data Table Data
Table Data Table Data Table Data
Table Data Table Data Table Data
``` ## Size modifiers Add the `.z-table-small` or `.z-table-large` class to a table to make it smaller or larger. ```html
``` ```html
Table Heading Table Heading Table Heading
Table Data Table Data Table Data
Table Data Table Data Table Data
Table Data Table Data Table Data
Table Heading Table Heading Table Heading
Table Data Table Data Table Data
Table Data Table Data Table Data
Table Data Table Data Table Data
``` ## Justify modifier To remove the outer padding of the first and last columns so that they are flush with the table, add the `.z-table-justify` class. ```html
``` ```html
Table Heading Table Heading Table Heading
Table Data Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Table Data Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
``` ## Alignment modifier To vertically center table content, just add the `.z-table-middle` class. You can also apply the class to `` or `` elements for a more specific selection. ```html
``` ```html
Table Heading Table Heading Table Heading
Table Data Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Table Data Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
``` ## Responsive table If your table happens to be wider than its container element or would eventually get too big on a specific viewport width, just wrap it inside a `
` element and add the `.z-overflow-auto` class. This creates a container that provides a horizontal scrollbar whenever the elements inside it are wider than the container itself. ```html
``` ```html
Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading
Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data
Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data
Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data
``` ### Stack on small viewports If you want table columns to stack on small screens, add the `.z-table-responsive` class. ```html
``` ```html
Table Heading Table Heading Table Heading
Table Data Table Data Table Data
Table Data Table Data Table Data
Table Data Table Data Table Data
``` Please resize the browser window to see the columns stack. Note To improve mobile readability, add `data-label="Your Label"` to table cells to show header info next to each data value. For full details, see [PR #95](https://github.com/franken-ui/ui/pull/95). ## Column width modifier To modify the column width or content, you can use one of the following classes. You just need to add this class to one of the column cells. It's recommended on the header cell. | Class | Description | | ------------------- | -------------------------------------------------------------------------------------------------------------------------- | | `.z-table-shrink ` | Add this class to a `` or `` element to reduce the column width to fit its content. | | `.z-table-expand` | Add this class to a `` or `` element to expand the column width to fill the remaining space and apply a min-width. | | `.w-*` | Add one of the width utility classes to a `` or `` element to modify the column width. | ```html ``` ```html
Shrink Expand Width Small
Table Data Table Data Table Data
Table Data Table Data Table Data
``` ## Utilities To optimize the display of table cells and their specific content, you can add one of the following classes. | Class | Description | | --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `.z-table-link` | To link an entire cell, add this class to a ``or `` element and insert an `` element. Add the `.z-link-reset`class from the [Link component](/docs/latest/kit/link) to reset the default link styling. | | `.z-preserve-width ` | Since images are responsive by default in UIkit, using an image inside a table cell with the `.z-table-shrink` class would reduce the image width to 0. To prevent this behavior, add the `.z-preserve-width` class to the `` element. | | `.z-text-truncate` | When applying a fixed width to a table cell, you might want to add this class to the `` element to truncate the text. | | `.text-nowrap` | Add this class to keep text from wrapping, for example when using the `.z-table-shrink` class. | ```html ``` ```html
Preserve Expand + Link Truncate Shrink + Nowrap
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor
```