1. Docs
  2. Components
  3. Tables
Buy Now Contact

Tables

Styling for tables.

Project Project Project Project Project
Value 1 Value 1 Value 1 Value 1 Value 1
Value 1 Value 1 Value 1 Value 1 Value 1
Value 1 Value 1 Value 1 Value 1 Value 1

<table class="c-table">
    <thead class="c-table__head">
        <tr class="c-table__row">
            <th class="c-table__cell c-table__cell--head">Project</th>
            <th class="c-table__cell c-table__cell--head">Project</th>
            <th class="c-table__cell c-table__cell--head">Project</th>
            <th class="c-table__cell c-table__cell--head">Project</th>
            <th class="c-table__cell c-table__cell--head">Project</th>
        </tr>
    </thead>
    <tbody>
        <tr class="c-table__row">
            <td class="c-table__cell">Value 1</td>
            <td class="c-table__cell">Value 1</td>
            <td class="c-table__cell">Value 1</td>
            <td class="c-table__cell">Value 1</td>
            <td class="c-table__cell">Value 1</td>
        </tr>
        <tr class="c-table__row">
            <td class="c-table__cell">Value 1</td>
            <td class="c-table__cell">Value 1</td>
            <td class="c-table__cell">Value 1</td>
            <td class="c-table__cell">Value 1</td>
            <td class="c-table__cell">Value 1</td>
        </tr>
        <tr class="c-table__row">
            <td class="c-table__cell">Value 1</td>
            <td class="c-table__cell">Value 1</td>
            <td class="c-table__cell">Value 1</td>
            <td class="c-table__cell">Value 1</td>
            <td class="c-table__cell">Value 1</td>
        </tr>
    </tbody>
</table>

Slim Table head

Different style for table head.

Project Project Project Project Project
Value 1 Value 1 Value 1 Value 1 Value 1
Value 1 Value 1 Value 1 Value 1 Value 1
Value 1 Value 1 Value 1 Value 1 Value 1

<table class="c-table">
    <thead class="c-table__head c-table__head--slim">
        <tr class="c-table__row">
            <th class="c-table__cell c-table__cell--head">Project</th>
            <th class="c-table__cell c-table__cell--head">Project</th>
            <th class="c-table__cell c-table__cell--head">Project</th>
            <th class="c-table__cell c-table__cell--head">Project</th>
            <th class="c-table__cell c-table__cell--head">Project</th>
        </tr>
    </thead>
    <tbody>
        <tr class="c-table__row">
            <td class="c-table__cell">Value 1</td>
            <td class="c-table__cell">Value 1</td>
            <td class="c-table__cell">Value 1</td>
            <td class="c-table__cell">Value 1</td>
            <td class="c-table__cell">Value 1</td>
        </tr>
        <tr class="c-table__row">
            <td class="c-table__cell">Value 1</td>
            <td class="c-table__cell">Value 1</td>
            <td class="c-table__cell">Value 1</td>
            <td class="c-table__cell">Value 1</td>
            <td class="c-table__cell">Value 1</td>
        </tr>
        <tr class="c-table__row">
            <td class="c-table__cell">Value 1</td>
            <td class="c-table__cell">Value 1</td>
            <td class="c-table__cell">Value 1</td>
            <td class="c-table__cell">Value 1</td>
            <td class="c-table__cell">Value 1</td>
        </tr>
    </tbody>
</table>


Table Caption (Title)

Add a customized caption/title to the table.

Table Title Sub title
Project Project Project Project Project
Value 1 Value 1 Value 1 Value 1 Value 1
Value 1 Value 1 Value 1 Value 1 Value 1
Value 1 Value 1 Value 1 Value 1 Value 1

<table class="c-table">
    <caption class="c-table__title">
        Table Title <small>Sub title</small>
        <a class="c-table__title-action" href="#!">
            <i class="fa fa-cloud-download"></i>
        </a>
    </caption>
    <thead class="c-table__head">
        <tr class="c-table__row">
            <th class="c-table__cell c-table__cell--head">Project</th>
            <th class="c-table__cell c-table__cell--head">Project</th>
            <th class="c-table__cell c-table__cell--head">Project</th>
            <th class="c-table__cell c-table__cell--head">Project</th>
            <th class="c-table__cell c-table__cell--head">Project</th>
        </tr>
    </thead>
    <tbody>
        <tr class="c-table__row">
            <td class="c-table__cell">Value 1</td>
            <td class="c-table__cell">Value 1</td>
            <td class="c-table__cell">Value 1</td>
            <td class="c-table__cell">Value 1</td>
            <td class="c-table__cell">Value 1</td>
        </tr>
        <tr class="c-table__row">
            <td class="c-table__cell">Value 1</td>
            <td class="c-table__cell">Value 1</td>
            <td class="c-table__cell">Value 1</td>
            <td class="c-table__cell">Value 1</td>
            <td class="c-table__cell">Value 1</td>
        </tr>
        <tr class="c-table__row">
            <td class="c-table__cell">Value 1</td>
            <td class="c-table__cell">Value 1</td>
            <td class="c-table__cell">Value 1</td>
            <td class="c-table__cell">Value 1</td>
            <td class="c-table__cell">Value 1</td>
        </tr>
    </tbody>
</table>


Sortable Tables

Sotrable tables with active pagination powered by DataTables plugin

Sortable Tables Powered by DataTables
Project Deadline Leader + Team Budget
New Dashboard 17th Oct, 17 Mahmoud $4,670
landing Page 23th Dec, 18 Norman Hammond $5,740
Customer Care Interface 2nd Jan, 18 Joseph Mullins $4,000
UX Consulting 1st Apr, 18 Ina Higgins $2,500
Mongo DB Integration 23th Dec, 18 Stella Munoz $800
Small Design Help 10th Apr, 17 Dylan Shelton $2,180
Subpages 1st Mar, 18 Ellen Santiago $4,670
Analytics 1st Jan, 18 Maurice Briggs $1350

<table class="c-table" id="datatable">
    <caption class="c-table__title">
        Sortable Tables <small>Powered by DataTables</small>
    </caption>
    <thead class="c-table__head c-table__head--slim">
        <tr class="c-table__row">
            <th class="c-table__cell c-table__cell--head no-sort">Project</th>
            <th class="c-table__cell c-table__cell--head">Deadline</th>
            <th class="c-table__cell c-table__cell--head no-sort">Leader + Team</th>
            <th class="c-table__cell c-table__cell--head">Budget</th>
        </tr>
    </thead>
    <tbody>
        <tr class="c-table__row">
            <td class="c-table__cell">New Dashboard</td>
            <td class="c-table__cell">17th Oct, 17</td>
            <td class="c-table__cell">Mahmoud</td>
            <td class="c-table__cell">$4,670</td>
        </tr>
        <tr class="c-table__row">
            <td class="c-table__cell">landing Page</td>
            <td class="c-table__cell">23th Dec, 18</td>
            <td class="c-table__cell">Norman Hammond</td>
            <td class="c-table__cell">$5,740</td>
        </tr>
        <tr class="c-table__row">
            <td class="c-table__cell">Customer Care Interface</td>
            <td class="c-table__cell">2nd Jan, 18</td>
            <td class="c-table__cell">Joseph Mullins</td>
            <td class="c-table__cell">$4,000</td>
        </tr>
        <tr class="c-table__row">
            <td class="c-table__cell">UX Consulting</td>
            <td class="c-table__cell">1st Apr, 18</td>
            <td class="c-table__cell">Ina Higgins</td>
            <td class="c-table__cell">$2,500</td>
        </tr>
        <tr class="c-table__row">
            <td class="c-table__cell">Mongo DB Integration</td>
            <td class="c-table__cell">23th Dec, 18</td>
            <td class="c-table__cell">Stella Munoz</td>
            <td class="c-table__cell">$800</td>
        </tr>
        <tr class="c-table__row">
            <td class="c-table__cell">Small Design Help</td>
            <td class="c-table__cell">10th Apr, 17</td>
            <td class="c-table__cell">Dylan Shelton</td>
            <td class="c-table__cell">$2,180</td>
        </tr>
        <tr class="c-table__row">
            <td class="c-table__cell">Subpages</td>
            <td class="c-table__cell">1st Mar, 18</td>
            <td class="c-table__cell">Ellen Santiago</td>
            <td class="c-table__cell">$4,670</td>
        </tr>
        <tr class="c-table__row">
            <td class="c-table__cell">Analytics</td>
            <td class="c-table__cell">1st Jan, 18</td>
            <td class="c-table__cell">Maurice Briggs</td>
            <td class="c-table__cell">$1350</td>
        </tr>
    </tbody>
</table>

Striped Tables

Add a zebra-style table by adding c-table--zebra modifider class.

Project Project Project Project Project
Value 1 Value 1 Value 1 Value 1 Value 1
Value 1 Value 1 Value 1 Value 1 Value 1
Value 1 Value 1 Value 1 Value 1 Value 1

<table class="c-table c-table--zebra">
    <thead class="c-table__head">
        <tr class="c-table__row">
            <th class="c-table__cell c-table__cell--head">Project</th>
            <th class="c-table__cell c-table__cell--head">Project</th>
            <th class="c-table__cell c-table__cell--head">Project</th>
            <th class="c-table__cell c-table__cell--head">Project</th>
            <th class="c-table__cell c-table__cell--head">Project</th>
        </tr>
    </thead>
    <tbody>
        <tr class="c-table__row">
            <td class="c-table__cell">Value 1</td>
            <td class="c-table__cell">Value 1</td>
            <td class="c-table__cell">Value 1</td>
            <td class="c-table__cell">Value 1</td>
            <td class="c-table__cell">Value 1</td>
        </tr>
        <tr class="c-table__row">
            <td class="c-table__cell">Value 1</td>
            <td class="c-table__cell">Value 1</td>
            <td class="c-table__cell">Value 1</td>
            <td class="c-table__cell">Value 1</td>
            <td class="c-table__cell">Value 1</td>
        </tr>
        <tr class="c-table__row">
            <td class="c-table__cell">Value 1</td>
            <td class="c-table__cell">Value 1</td>
            <td class="c-table__cell">Value 1</td>
            <td class="c-table__cell">Value 1</td>
            <td class="c-table__cell">Value 1</td>
        </tr>
    </tbody>
</table>

Highlight Tables

Highlight the hovered row by adding c-table--highlight modifier.

Project Project Project Project Project
Value 1 Value 1 Value 1 Value 1 Value 1
Value 1 Value 1 Value 1 Value 1 Value 1
Value 1 Value 1 Value 1 Value 1 Value 1

<table class="c-table c-table--highlight">
    <thead class="c-table__head">
        <tr class="c-table__row">
            <th class="c-table__cell c-table__cell--head">Project</th>
            <th class="c-table__cell c-table__cell--head">Project</th>
            <th class="c-table__cell c-table__cell--head">Project</th>
            <th class="c-table__cell c-table__cell--head">Project</th>
            <th class="c-table__cell c-table__cell--head">Project</th>
        </tr>
    </thead>
    <tbody>
        <tr class="c-table__row">
            <td class="c-table__cell">Value 1</td>
            <td class="c-table__cell">Value 1</td>
            <td class="c-table__cell">Value 1</td>
            <td class="c-table__cell">Value 1</td>
            <td class="c-table__cell">Value 1</td>
        </tr>
        <tr class="c-table__row">
            <td class="c-table__cell">Value 1</td>
            <td class="c-table__cell">Value 1</td>
            <td class="c-table__cell">Value 1</td>
            <td class="c-table__cell">Value 1</td>
            <td class="c-table__cell">Value 1</td>
        </tr>
        <tr class="c-table__row">
            <td class="c-table__cell">Value 1</td>
            <td class="c-table__cell">Value 1</td>
            <td class="c-table__cell">Value 1</td>
            <td class="c-table__cell">Value 1</td>
            <td class="c-table__cell">Value 1</td>
        </tr>
    </tbody>
</table>


Responsive Tables

Tables are responsive by default but if you have a large table with a lot of content then you need to wrap your table with on of these classes:

  • c-table-responsive
  • c-table-responsive@mobile
  • c-table-responsive@tablet
  • c-table-responsive@desktop
  • c-table-responsive@wide

Each one of these classes will force the table to take full width and show horizontal scrollbar based on the breakpoint specified.

For example: c-table-responsive@tablet would force the table on viewports less than the tablet breakpoint to take full width and show horizontal scrollbar.

<div class="c-table-responsive@tablet">
    <table class="c-table">
        ...
    </table>
</div>