Home Documentation
Getting started General
Components
Forms
Utilities
Check changelog.
0.5.3

Table

Organize your data with our tables.

We provided various options to simplify your data organization with table.

Basic table

Tables have a basic design, to format easily your table simply add the .table class.
# Name Age City
1 Paul 24 Paris
2 Patrick 34 Nice
3 Robert 62 Limoges

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

Responsive - Method 1

We provided 2 methods to get a responsive table. This is the "classic" method. You simply need to change 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