Table

Organize your data with our tables.

Name Role Status
Grover Fermaint

Grover Fermaint
[email protected]

CEO
Management
Active
Rea Budgett

Rea Budgett
[email protected]

Technical Lead
Development
Vacation
Hunter Krohmer

Hunter Krohmer
[email protected]

Sales Manager
Sales
Active
</> Show code
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 .table-responsive 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 .table-responsive class by the .table-responsive-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 .table-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 .table-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 .table-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 .table-no-border class.
# Name Age City
1 Paul 24 Paris
2 Patrick 34 Nice
3 Robert 62 Limoges

Centered table

The .table-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

Styling

CSS Variable Default value Description
--ax-table-border 1px solid #d2d2d2 Table border property.