Geniux

Tables

Custom

The HTML tables are used to present data in grid manner like row and columns.

# First Name Last Name Email
1 Mike Ross example@mail.com
2 Joe Smith example@mail.com
3 John Geniux example@mail.com
Show Code

Striped

Create table with alternate background like zebra-stripes by simply adding the Bootstrap's class .table-striped to the .table base class.

# First Name Last Name Email
1 Mike Ross example@mail.com
2 Joe Smith example@mail.com
3 John Geniux example@mail.com
Show Code

Borders

Add borders to the all table cells by adding an extra Bootstrap's class .table-bordered to the .table base class.

# First Name Last Name Email
1 Mike Ross example@mail.com
2 Joe Smith example@mail.com
3 John Geniux example@mail.com
Show Code

Hover

Enable a hover state on table rows using the class .table-hover.

Hover

# First Name Last Name Email
1 Mike Ross example@mail.com
2 Joe Smith example@mail.com
3 John Geniux example@mail.com
Show Code

Condensed

Make your tables more compact and save the space through adding the class .table-condensed to the .table base class.

# First Name Last Name Email
1 Mike Ross example@mail.com
2 Joe Smith example@mail.com
3 John Geniux example@mail.com
Show Code

Contextual Classes

Use contextual classes to emphasize the row or individual cells data like success, warning, danger, etc.

# Heading title Heading title Heading title
1 Row content Row content Row content
2 Row content Row content Row content
3 Row content Row content Row content
4 Row content Row content4 Row content
5 Row content Row content Row content
Show Code

Responsive

To make any table responsive just place the table inside a <div> element and apply the class .table-responsive on it.

# First Name Last Name Email
1 Mike Ross example@mail.com
2 Joe Smith example@mail.com
3 John Geniux example@mail.com
Show Code