To apply this component, add the .uk-table class to a <table> element. element.

Table Heading Table Heading Table Heading
Table Footer Table Footer Table Footer
Table Data Table Data Table Data
Table Data Table Data Table Data

Divider modifier

<table class="uk-table uk-table-divider">...</table>

Add the .uk-table-divider class to display a divider between table rows.

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

<table class="uk-table uk-table-striped">...</table>

Add zebra-striping to a table by adding the .uk-table-striped class.

Table Heading Table Heading Table Heading
Table Data Table Data Table Data
Table Data Table Data Table Data
Table Data Table Data Table Data

Responsive table

<div class="uk-overflow-auto">
    <table class="uk-table">...</table>
</div>

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 <div> element and add the .uk-overflow-auto class .. This creates a container that provides a horizontal scrollbar whenever the elements inside it are wider than the container itself

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

© 2019 Sasuke. All Rights Reserved.