Table

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

Usage

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

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

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

Something's not working? Feel free to report an issue or edit this snippet .

<table class="uk-table">
  <caption>
    Table Caption
  </caption>
  <thead>
    <tr>
      <th>Table Heading</th>
      <th>Table Heading</th>
      <th>Table Heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table Data</td>
      <td>Table Data</td>
      <td>Table Data</td>
    </tr>
    <tr>
      <td>Table Data</td>
      <td>Table Data</td>
      <td>Table Data</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Table Footer</td>
      <td>Table Footer</td>
      <td>Table Footer</td>
    </tr>
  </tfoot>
</table>

Something's not working? Feel free to report an issue or edit this snippet .

<table className="uk-table">
  <caption>
    Table Caption
  </caption>
  <thead>
    <tr>
      <th>Table Heading</th>
      <th>Table Heading</th>
      <th>Table Heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table Data</td>
      <td>Table Data</td>
      <td>Table Data</td>
    </tr>
    <tr>
      <td>Table Data</td>
      <td>Table Data</td>
      <td>Table Data</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Table Footer</td>
      <td>Table Footer</td>
      <td>Table Footer</td>
    </tr>
  </tfoot>
</table>

Divider modifier

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

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

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

Something's not working? Feel free to report an issue or edit this snippet .

<table class="uk-table uk-table-divider">
  <thead>
    <tr>
      <th>Table Heading</th>
      <th>Table Heading</th>
      <th>Table Heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table Data</td>
      <td>Table Data</td>
      <td>Table Data</td>
    </tr>
    <tr>
      <td>Table Data</td>
      <td>Table Data</td>
      <td>Table Data</td>
    </tr>
    <tr>
      <td>Table Data</td>
      <td>Table Data</td>
      <td>Table Data</td>
    </tr>
  </tbody>
</table>

Something's not working? Feel free to report an issue or edit this snippet .

<table className="uk-table uk-table-divider">
  <thead>
    <tr>
      <th>Table Heading</th>
      <th>Table Heading</th>
      <th>Table Heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table Data</td>
      <td>Table Data</td>
      <td>Table Data</td>
    </tr>
    <tr>
      <td>Table Data</td>
      <td>Table Data</td>
      <td>Table Data</td>
    </tr>
    <tr>
      <td>Table Data</td>
      <td>Table Data</td>
      <td>Table Data</td>
    </tr>
  </tbody>
</table>

Striped modifier

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

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

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

Something's not working? Feel free to report an issue or edit this snippet .

<table class="uk-table uk-table-striped">
  <thead>
    <tr>
      <th>Table Heading</th>
      <th>Table Heading</th>
      <th>Table Heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table Data</td>
      <td>Table Data</td>
      <td>Table Data</td>
    </tr>
    <tr>
      <td>Table Data</td>
      <td>Table Data</td>
      <td>Table Data</td>
    </tr>
    <tr>
      <td>Table Data</td>
      <td>Table Data</td>
      <td>Table Data</td>
    </tr>
  </tbody>
</table>

Something's not working? Feel free to report an issue or edit this snippet .

<table className="uk-table uk-table-striped">
  <thead>
    <tr>
      <th>Table Heading</th>
      <th>Table Heading</th>
      <th>Table Heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table Data</td>
      <td>Table Data</td>
      <td>Table Data</td>
    </tr>
    <tr>
      <td>Table Data</td>
      <td>Table Data</td>
      <td>Table Data</td>
    </tr>
    <tr>
      <td>Table Data</td>
      <td>Table Data</td>
      <td>Table Data</td>
    </tr>
  </tbody>
</table>

Hover modifier

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

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

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

Something's not working? Feel free to report an issue or edit this snippet .

<table class="uk-table uk-table-divider uk-table-hover">
  <thead>
    <tr>
      <th>Table Heading</th>
      <th>Table Heading</th>
      <th>Table Heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table Data</td>
      <td>Table Data</td>
      <td>Table Data</td>
    </tr>
    <tr>
      <td>Table Data</td>
      <td>Table Data</td>
      <td>Table Data</td>
    </tr>
    <tr>
      <td>Table Data</td>
      <td>Table Data</td>
      <td>Table Data</td>
    </tr>
  </tbody>
</table>

Something's not working? Feel free to report an issue or edit this snippet .

<table className="uk-table uk-table-divider uk-table-hover">
  <thead>
    <tr>
      <th>Table Heading</th>
      <th>Table Heading</th>
      <th>Table Heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table Data</td>
      <td>Table Data</td>
      <td>Table Data</td>
    </tr>
    <tr>
      <td>Table Data</td>
      <td>Table Data</td>
      <td>Table Data</td>
    </tr>
    <tr>
      <td>Table Data</td>
      <td>Table Data</td>
      <td>Table Data</td>
    </tr>
  </tbody>
</table>

Size modifiers

Add the .uk-table-sm or .uk-table-lg class to a table to make it smaller or larger.

<table class="uk-table uk-table-sm">
  <!-- ... -->
</table>

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

Something's not working? Feel free to report an issue or edit this snippet .

<table class="uk-table-sm uk-table uk-table-divider">
  <thead>
    <tr>
      <th>Table Heading</th>
      <th>Table Heading</th>
      <th>Table Heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table Data</td>
      <td>Table Data</td>
      <td>Table Data</td>
    </tr>
    <tr>
      <td>Table Data</td>
      <td>Table Data</td>
      <td>Table Data</td>
    </tr>
    <tr>
      <td>Table Data</td>
      <td>Table Data</td>
      <td>Table Data</td>
    </tr>
  </tbody>
</table>

<table class="uk-table-lg uk-table uk-table-divider mt-4">
  <thead>
    <tr>
      <th>Table Heading</th>
      <th>Table Heading</th>
      <th>Table Heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table Data</td>
      <td>Table Data</td>
      <td>Table Data</td>
    </tr>
    <tr>
      <td>Table Data</td>
      <td>Table Data</td>
      <td>Table Data</td>
    </tr>
    <tr>
      <td>Table Data</td>
      <td>Table Data</td>
      <td>Table Data</td>
    </tr>
  </tbody>
</table>

Something's not working? Feel free to report an issue or edit this snippet .

<div>
  <table className="uk-table-sm uk-table uk-table-divider">
    <thead>
      <tr>
        <th>Table Heading</th>
        <th>Table Heading</th>
        <th>Table Heading</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Table Data</td>
        <td>Table Data</td>
        <td>Table Data</td>
      </tr>
      <tr>
        <td>Table Data</td>
        <td>Table Data</td>
        <td>Table Data</td>
      </tr>
      <tr>
        <td>Table Data</td>
        <td>Table Data</td>
        <td>Table Data</td>
      </tr>
    </tbody>
  </table>
  <table className="uk-table-lg uk-table uk-table-divider mt-4">
    <thead>
      <tr>
        <th>Table Heading</th>
        <th>Table Heading</th>
        <th>Table Heading</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Table Data</td>
        <td>Table Data</td>
        <td>Table Data</td>
      </tr>
      <tr>
        <td>Table Data</td>
        <td>Table Data</td>
        <td>Table Data</td>
      </tr>
      <tr>
        <td>Table Data</td>
        <td>Table Data</td>
        <td>Table Data</td>
      </tr>
    </tbody>
  </table>
</div>

Justify modifier

To remove the outer padding of the first and last columns so that they are flush with the table, add the .uk-table-justify class.

<table class="uk-table uk-table-justify">
  <!-- ... -->
</table>

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.

Something's not working? Feel free to report an issue or edit this snippet .

<table class="uk-table uk-table-divider uk-table-justify">
  <thead>
    <tr>
      <th class="w-40">Table Heading</th>
      <th>Table Heading</th>
      <th>Table Heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table Data</td>
      <td>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua.
      </td>
      <td>
        <button class="uk-btn uk-btn-default" type="button">Button</button>
      </td>
    </tr>
    <tr>
      <td>Table Data</td>
      <td>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua.
      </td>
      <td>
        <button class="uk-btn uk-btn-default" type="button">Button</button>
      </td>
    </tr>
  </tbody>
</table>

Something's not working? Feel free to report an issue or edit this snippet .

<table className="uk-table uk-table-divider uk-table-justify">
  <thead>
    <tr>
      <th className="w-40">Table Heading</th>
      <th>Table Heading</th>
      <th>Table Heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table Data</td>
      <td>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua.
      </td>
      <td>
        <button className="uk-btn uk-btn-default" type="button">Button</button>
      </td>
    </tr>
    <tr>
      <td>Table Data</td>
      <td>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua.
      </td>
      <td>
        <button className="uk-btn uk-btn-default" type="button">Button</button>
      </td>
    </tr>
  </tbody>
</table>

Alignment modifier

To vertically center table content, just add the .uk-table-middle class. You can also apply the class to <tr> or <td> elements for a more specific selection.

<table class="uk-table uk-table-middle">
  <!-- ... -->
</table>

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.

Something's not working? Feel free to report an issue or edit this snippet .

<table class="uk-table uk-table-middle uk-table-divider">
  <thead>
    <tr>
      <th class="w-40">Table Heading</th>
      <th>Table Heading</th>
      <th>Table Heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table Data</td>
      <td>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua.
      </td>
      <td>
        <button class="uk-btn uk-btn-default" type="button">Button</button>
      </td>
    </tr>
    <tr>
      <td>Table Data</td>
      <td>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua.
      </td>
      <td>
        <button class="uk-btn uk-btn-default" type="button">Button</button>
      </td>
    </tr>
  </tbody>
</table>

Something's not working? Feel free to report an issue or edit this snippet .

<table className="uk-table uk-table-middle uk-table-divider">
  <thead>
    <tr>
      <th className="w-40">Table Heading</th>
      <th>Table Heading</th>
      <th>Table Heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table Data</td>
      <td>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua.
      </td>
      <td>
        <button className="uk-btn uk-btn-default" type="button">Button</button>
      </td>
    </tr>
    <tr>
      <td>Table Data</td>
      <td>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua.
      </td>
      <td>
        <button className="uk-btn uk-btn-default" type="button">Button</button>
      </td>
    </tr>
  </tbody>
</table>

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

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

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

Something's not working? Feel free to report an issue or edit this snippet .

<div class="uk-overflow-auto">
  <table class="uk-table-small uk-table uk-table-divider">
    <thead>
      <tr>
        <th>Table Heading</th>
        <th>Table Heading</th>
        <th>Table Heading</th>
        <th>Table Heading</th>
        <th>Table Heading</th>
        <th>Table Heading</th>
        <th>Table Heading</th>
        <th>Table Heading</th>
        <th>Table Heading</th>
        <th>Table Heading</th>
        <th>Table Heading</th>
        <th>Table Heading</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Table Data</td>
        <td>Table Data</td>
        <td>Table Data</td>
        <td>Table Data</td>
        <td>Table Data</td>
        <td>Table Data</td>
        <td>Table Data</td>
        <td>Table Data</td>
        <td>Table Data</td>
        <td>Table Data</td>
        <td>Table Data</td>
        <td>Table Data</td>
      </tr>
      <tr>
        <td>Table Data</td>
        <td>Table Data</td>
        <td>Table Data</td>
        <td>Table Data</td>
        <td>Table Data</td>
        <td>Table Data</td>
        <td>Table Data</td>
        <td>Table Data</td>
        <td>Table Data</td>
        <td>Table Data</td>
        <td>Table Data</td>
        <td>Table Data</td>
      </tr>
      <tr>
        <td>Table Data</td>
        <td>Table Data</td>
        <td>Table Data</td>
        <td>Table Data</td>
        <td>Table Data</td>
        <td>Table Data</td>
        <td>Table Data</td>
        <td>Table Data</td>
        <td>Table Data</td>
        <td>Table Data</td>
        <td>Table Data</td>
        <td>Table Data</td>
      </tr>
    </tbody>
  </table>
</div>

Something's not working? Feel free to report an issue or edit this snippet .

<div className="uk-overflow-auto">
  <table className="uk-table-small uk-table uk-table-divider">
    <thead>
      <tr>
        <th>Table Heading</th>
        <th>Table Heading</th>
        <th>Table Heading</th>
        <th>Table Heading</th>
        <th>Table Heading</th>
        <th>Table Heading</th>
        <th>Table Heading</th>
        <th>Table Heading</th>
        <th>Table Heading</th>
        <th>Table Heading</th>
        <th>Table Heading</th>
        <th>Table Heading</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Table Data</td>
        <td>Table Data</td>
        <td>Table Data</td>
        <td>Table Data</td>
        <td>Table Data</td>
        <td>Table Data</td>
        <td>Table Data</td>
        <td>Table Data</td>
        <td>Table Data</td>
        <td>Table Data</td>
        <td>Table Data</td>
        <td>Table Data</td>
      </tr>
      <tr>
        <td>Table Data</td>
        <td>Table Data</td>
        <td>Table Data</td>
        <td>Table Data</td>
        <td>Table Data</td>
        <td>Table Data</td>
        <td>Table Data</td>
        <td>Table Data</td>
        <td>Table Data</td>
        <td>Table Data</td>
        <td>Table Data</td>
        <td>Table Data</td>
      </tr>
      <tr>
        <td>Table Data</td>
        <td>Table Data</td>
        <td>Table Data</td>
        <td>Table Data</td>
        <td>Table Data</td>
        <td>Table Data</td>
        <td>Table Data</td>
        <td>Table Data</td>
        <td>Table Data</td>
        <td>Table Data</td>
        <td>Table Data</td>
        <td>Table Data</td>
      </tr>
    </tbody>
  </table>
</div>

Stack on small viewports

If you want table columns to stack on small screens, add the .uk-table-responsive class.

<table class="uk-table uk-table-responsive">
  <!-- ... -->
</table>

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

Something's not working? Feel free to report an issue or edit this snippet .

<table class="uk-table uk-table-divider uk-table-responsive">
  <thead>
    <tr>
      <th>Table Heading</th>
      <th>Table Heading</th>
      <th>Table Heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table Data</td>
      <td>Table Data</td>
      <td>Table Data</td>
    </tr>
    <tr>
      <td>Table Data</td>
      <td>Table Data</td>
      <td>Table Data</td>
    </tr>
    <tr>
      <td>Table Data</td>
      <td>Table Data</td>
      <td>Table Data</td>
    </tr>
  </tbody>
</table>

Something's not working? Feel free to report an issue or edit this snippet .

<table className="uk-table uk-table-divider uk-table-responsive">
  <thead>
    <tr>
      <th>Table Heading</th>
      <th>Table Heading</th>
      <th>Table Heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table Data</td>
      <td>Table Data</td>
      <td>Table Data</td>
    </tr>
    <tr>
      <td>Table Data</td>
      <td>Table Data</td>
      <td>Table Data</td>
    </tr>
    <tr>
      <td>Table Data</td>
      <td>Table Data</td>
      <td>Table Data</td>
    </tr>
  </tbody>
</table>

Note Resize the browser window to see the columns stack.

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
`.uk-table-shrink`	Add this class to a `<th>` or `<td>` element to reduce the column width to fit its content.
`.uk-table-expand`	Add this class to a `<th>` or `<td>` element to expand the column width to fill the remaining space and apply a min-width.
`.w-*`	Add one of the width utility classes from Tailwind CSS to a `<th>` or `<td>` element to modify the column width.

<th class="uk-table-shrink"></th>

Shrink Expand Width Small

Table Data Table Data Table Data

Table Data Table Data Table Data

Something's not working? Feel free to report an issue or edit this snippet .

<table class="uk-table uk-table-divider">
  <thead>
    <tr>
      <th class="uk-table-shrink">Shrink</th>
      <th class="uk-table-expand">Expand</th>
      <th class="w-40">Width Small</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table Data</td>
      <td>Table Data</td>
      <td>Table Data</td>
    </tr>
    <tr>
      <td>Table Data</td>
      <td>Table Data</td>
      <td>Table Data</td>
    </tr>
  </tbody>
</table>

Something's not working? Feel free to report an issue or edit this snippet .

<table className="uk-table uk-table-divider">
  <thead>
    <tr>
      <th className="uk-table-shrink">Shrink</th>
      <th className="uk-table-expand">Expand</th>
      <th className="w-40">Width Small</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table Data</td>
      <td>Table Data</td>
      <td>Table Data</td>
    </tr>
    <tr>
      <td>Table Data</td>
      <td>Table Data</td>
      <td>Table Data</td>
    </tr>
  </tbody>
</table>

Utilities

To optimize the display of table cells and their specific content, you can add one of the following classes.

Class	Description
`.uk-table-link`	To link an entire cell, add this class to a `<th>`or `<td>` element and insert an `<a>` element. Add the `.uk-link-reset`class from the Link component to reset the default link styling.
`.uk-preserve-width`	Since images are responsive by default in UIkit, using an image inside a table cell with the `.uk-table-shrink` class would reduce the image width to 0. To prevent this behavior, add the `.uk-preserve-width` class to the `<img>` element.
`.uk-text-truncate`	When applying a fixed width to a table cell, you might want to add this class from the Text component to the `<td>` element to truncate the text.
`.text-nowrap`	Add this class from the Tailwind CSS to keep text from wrapping, for example when using the `.uk-table-shrink` class.

<!-- Table link -->
<td class="uk-table-link">
  <a class="uk-link-reset" href=""></a>
</td>

<!-- Preserve width -->
<td>
  <img class="uk-preserve-width" src="" width="" height="" alt="" />
</td>

<!-- Text truncate -->
<td class="uk-text-truncate"></td>

<!-- Text nowrap -->
<td class="uk-text-nowrap"></td>

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

Something's not working? Feel free to report an issue or edit this snippet .

<div class="uk-overflow-auto">
  <table class="uk-table uk-table-middle uk-table-divider uk-table-hover">
    <thead>
      <tr>
        <th class="uk-table-shrink"></th>
        <th class="uk-table-shrink">Preserve</th>
        <th class="uk-table-expand">Expand + Link</th>
        <th class="w-40">Truncate</th>
        <th class="uk-table-shrink text-nowrap">Shrink + Nowrap</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <input class="uk-checkbox" type="checkbox" aria-label="Checkbox" />
        </td>
        <td>
          <img
            class="uk-preserve-width rounded-full"
            src="/images/avatar.jpg"
            width="40"
            height="40"
            alt=""
          />
        </td>
        <td class="uk-table-link">
          <a class="uk-link-reset" href=""
            >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor.</a
          >
        </td>
        <td class="uk-text-truncate">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor.
        </td>
        <td class="text-nowrap">Lorem ipsum dolor</td>
      </tr>
      <tr>
        <td>
          <input class="uk-checkbox" type="checkbox" aria-label="Checkbox" />
        </td>
        <td>
          <img
            class="uk-preserve-width rounded-full"
            src="/images/avatar.jpg"
            width="40"
            height="40"
            alt=""
          />
        </td>
        <td class="uk-table-link">
          <a class="uk-link-reset" href=""
            >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor.</a
          >
        </td>
        <td class="uk-text-truncate">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor.
        </td>
        <td class="text-nowrap">Lorem ipsum dolor</td>
      </tr>
      <tr>
        <td>
          <input class="uk-checkbox" type="checkbox" aria-label="Checkbox" />
        </td>
        <td>
          <img
            class="uk-preserve-width rounded-full"
            src="/images/avatar.jpg"
            width="40"
            height="40"
            alt=""
          />
        </td>
        <td class="uk-table-link">
          <a class="uk-link-reset" href=""
            >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor.</a
          >
        </td>
        <td class="uk-text-truncate">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor.
        </td>
        <td class="text-nowrap">Lorem ipsum dolor</td>
      </tr>
      <tr>
        <td>
          <input class="uk-checkbox" type="checkbox" aria-label="Checkbox" />
        </td>
        <td>
          <img
            class="uk-preserve-width rounded-full"
            src="/images/avatar.jpg"
            width="40"
            height="40"
            alt=""
          />
        </td>
        <td class="uk-table-link">
          <a class="uk-link-reset" href=""
            >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor.</a
          >
        </td>
        <td class="uk-text-truncate">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor.
        </td>
        <td class="text-nowrap">Lorem ipsum dolor</td>
      </tr>
    </tbody>
  </table>
</div>

Something's not working? Feel free to report an issue or edit this snippet .

<div className="uk-overflow-auto">
  <table className="uk-table uk-table-middle uk-table-divider uk-table-hover">
    <thead>
      <tr>
        <th className="uk-table-shrink" />
        <th className="uk-table-shrink">Preserve</th>
        <th className="uk-table-expand">Expand + Link</th>
        <th className="w-40">Truncate</th>
        <th className="uk-table-shrink text-nowrap">Shrink + Nowrap</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <input className="uk-checkbox" type="checkbox" aria-label="Checkbox" />
        </td>
        <td>
          <img className="uk-preserve-width rounded-full" src="/images/avatar.jpg" width={40} height={40} alt />
        </td>
        <td className="uk-table-link">
          <a className="uk-link-reset" href>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor.</a>
        </td>
        <td className="uk-text-truncate">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor.
        </td>
        <td className="text-nowrap">Lorem ipsum dolor</td>
      </tr>
      <tr>
        <td>
          <input className="uk-checkbox" type="checkbox" aria-label="Checkbox" />
        </td>
        <td>
          <img className="uk-preserve-width rounded-full" src="/images/avatar.jpg" width={40} height={40} alt />
        </td>
        <td className="uk-table-link">
          <a className="uk-link-reset" href>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor.</a>
        </td>
        <td className="uk-text-truncate">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor.
        </td>
        <td className="text-nowrap">Lorem ipsum dolor</td>
      </tr>
      <tr>
        <td>
          <input className="uk-checkbox" type="checkbox" aria-label="Checkbox" />
        </td>
        <td>
          <img className="uk-preserve-width rounded-full" src="/images/avatar.jpg" width={40} height={40} alt />
        </td>
        <td className="uk-table-link">
          <a className="uk-link-reset" href>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor.</a>
        </td>
        <td className="uk-text-truncate">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor.
        </td>
        <td className="text-nowrap">Lorem ipsum dolor</td>
      </tr>
      <tr>
        <td>
          <input className="uk-checkbox" type="checkbox" aria-label="Checkbox" />
        </td>
        <td>
          <img className="uk-preserve-width rounded-full" src="/images/avatar.jpg" width={40} height={40} alt />
        </td>
        <td className="uk-table-link">
          <a className="uk-link-reset" href>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor.</a>
        </td>
        <td className="uk-text-truncate">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor.
        </td>
        <td className="text-nowrap">Lorem ipsum dolor</td>
      </tr>
    </tbody>
  </table>
</div>

On This Page
Usage
Divider modifier
Striped modifier
Hover modifier
Size modifiers
Justify modifier
Alignment modifier
Responsive table
Column width modifier
Utilities