3

Responsive Tables

Scrollable

Tables will be scrollable if it exceeds it's container.

Basic Example

This example is basic and responsive. Make sure you wrap the table with a container has class table-responsive.

# Table heading Table heading Table heading Table heading Table heading Table heading
1 Table cell Table cell Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell Table cell Table cell
3 Table cell Table cell Table cell Table cell Table cell Table cell

Inverse Table

Almost same example with the above but only inverse coloring.

# Table heading Table heading Table heading Table heading Table heading Table heading
1 Table cell Table cell Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell Table cell Table cell
3 Table cell Table cell Table cell Table cell Table cell Table cell

Table Head Options

Different style of thead's are available.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Striped Table

Stripes on table rows. Every odd row gets a soft dark background.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Bordered Table

Border between every cell and outer table.

# First Name Last Name Username
1 Mark Otto @mdo
2 Mark Otto @TwBootstrap
3 Jacob Thornton @fat
4 Larry the Bird @twitter

Hoverable Rows

When you touch on a row you will see a soft background under it.

# First Name Last Name Username
1 Mark Otto @mdo
2 Mark Otto @TwBootstrap
3 Jacob Thornton @fat
4 Larry the Bird @twitter

Contextual Classes

Use contextual classes to color table rows or individual cells.

Class Description
.table-active Applies the hover color to a particular row or cell
.table-success Indicates a successful or positive action
.table-info Indicates a neutral informative change or action
.table-warning Indicates a warning that might need attention
.table-danger Indicates a dangerous or potentially negative action
# Column heading Column heading Column heading
1 Column content Column content Column content
2 Column content Column content Column content
3 Column content Column content Column content
4 Column content Column content Column content
5 Column content Column content Column content
6 Column content Column content Column content
7 Column content Column content Column content
8 Column content Column content Column content
9 Column content Column content Column content
Copyright © 2016 by Mobius Studio

Melena Aaberg

Tech-Geek/Nerd

Address: Lipsum Street Lorem
Way PO 60009 Dolor/ALASKA

Phone: +1 234 56 78

Fax: +1 876 54 32

E-Mail: amp@mobius.studio