Table

Easily create nicely looking tables, which come in different styles.

Usage

To apply this component, add the .uk-table class to a table. The table rows will be separated by lines.

Example

Markup

<table class="uk-table">
    <caption>...</caption>
    <thead>
        <tr>
            <th>...</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td>...</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>...</td>
        </tr>
    </tbody>
</table>

Columns

To modify the column width or content, you can use other components. Here are some useful examples:

Markup

<td class="uk-width-1-10 uk-text-right">...</td>
<td class="uk-width-9-10 uk-text-bold">...</td>

Vertical modifier

To vertically center table content, just add the .uk-table-middle class to the <tr> or <td> elements.

Modifiers

To display the table in a different style, just add a modifier to the the .uk-table class.

Table hover

Add the .uk-table-hover class to display a hover state on table rows.

Example

Markup

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

Table striped

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

Example

Markup

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

Table condensed

Add the .uk-table-condensed class to make table cells more compact.

Example

Markup

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

Combine modifiers

The modifiers of the Table component are combinable with each other.

Example

Markup

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

Responsive Table

If your table happens to be wider that 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-container class. This creates a container that provides a horizontal scrollbar whenever the elements inside it are wider than the container itself.

Example

Markup

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