Download Github
English

Tables

Basic Table

It is the component with which we display information ordered in rows and columns.

Use

Copy the HTML snippet and keep in mind:

  1. The element with the class nkn-table is the parent container, it must be in the <table> tag
  2. The user chooses whether or not to have the <caption> tag.

Example

HTML Snippet

Responsive table: Vertical

The responsive table that swaps a row for a column on small screens.

Use

Copy the HTML snippet and keep in mind:

  1. The <table> element with the nkn-table nkn-vertical class is the parent container.
  2. The table header <thead> is hidden in small screens.
  3. The cell <td> of the body of the table (<tbody>) must have the following structure:
    <td data-title = "column title" > ... </td>

    Where data-title = "column title", it is used to display the column title on small screens.

Example

Reduce the size of your screen to see the responsive style.

HTML Snippet

Responsive table: Reduced

It is a responsive table that allows the user to select the cells with relevant information that will be displayed on small screens.

Use

Copy the HTML snippet and keep in mind:

  1. The <table> element with the nkn-table nkn-reduces classes is the parent container.
  2. To indicate which cells you want to display, the classes are used:
    • nkn-title: Main or most relevant field, used only in one (1) cell.
    • nkn-description: Description and / or secondary information complementary to the title, it can be used in more than one (1) cell.
    • nkn-right-top: additional information that you want to show, it must be short, they can also be icons.

Example

Reduce the size of your screen to see the responsive style.

HTML Snippet