Home Documentation
Getting started General
Components
Forms
Utilities
Sass Plugins
Check changelog.
1.0.0-beta.2

Table

Organize your data with our tables.

We provided various options to simplify your data organization with table.
Tables have a basic design, to easily format your table simply add the .table class.

Responsive - Method 1

We provided 2 methods to get a responsive table. This is the "classic" method. You simply need to wrap the .table class into a .responsive-table class.
# Name Age City Country Car
1 Paul 24 Paris France Mustang
2 Patrick 34 Nice France Renault
3 Robert 62 Limoges France Ferrari

Responsive - Method 2

This method turn your thead items at the left of the table.
To make it, replace the .responsive-table class by the .responsive-table-2 class.
# Name Age City Country Car
1 Paul 24 Paris France Mustang
2 Patrick 34 Nice France Renault
3 Robert 62 Limoges France Ferrari

Striped

Add the .striped class to your table element to get a striped table.
# Name Age City
1 Paul 24 Paris
2 Patrick 34 Nice
3 Robert 62 Limoges

Hoverable rows

You can add a hover effect on each row with .hover class.
# Name Age City
1 Paul 24 Paris
2 Patrick 34 Nice
3 Robert 62 Limoges

Bordered table

For fully bordered table, add the .bordered class.
# Name Age City
1 Paul 24 Paris
2 Patrick 34 Nice
3 Robert 62 Limoges

No borders

You wanna disable all borders ? Okay, add the .border-0 class.
# Name Age City
1 Paul 24 Paris
2 Patrick 34 Nice
3 Robert 62 Limoges

Centered table

The .centered class helps you to center the data in your table.
# Name Age City
1 Paul 24 Paris
2 Patrick 34 Nice
3 Robert 62 Limoges

With a caption

Simply add a <caption></caption> into your table to automatically create a caption and center it at the bottom of the table.
This is a caption
# Name Age City
1 Paul 24 Paris
2 Patrick 34 Nice
3 Robert 62 Limoges