Basic Tables

Basic example

For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>.

Compny Bill Average Bill Paid Bill Action
Micromin 4 $250 $800
ZZ Diamond 2 $180 $400
Dairy Sweet 6 $210 $500
Corner Tea 3 $80 $350

Bordered table

Add .table-bordered for borders on all sides of the table and cells.

Transaction ID Date Price Order Status Action
#124781 25/11/2018 $321 Approved
#542136 19/11/2018 $227 Approved
#234578 11/10/2018 $442 Rejected
#951357 03/12/2018 $625 Approved

Striped rows

Use .table-striped to add zebra-striping to any table row within the <tbody>.

Customer Email Contact No Action
Aaron Poulin Aaron@example.com +21 21547896
Richard Ali Richard@example.com +41 21547896
Juan Clark Juan@example.com +65 21547896
Albert Hull Albert@example.com +88 21547896

Table head options

Use one of two modifier classes to make <thead>s appear light or dark gray.

# Name Email Access
1 Mark XYZ@Example.com Business
2 Jacob XYZ@Example.com Personal
3 Larry XYZ@Example.com Disabled
4 Mark XYZ@Example.com Business
5 Jacob XYZ@Example.com Personal

Hoverable rows

Use .table-striped to add zebra-striping to any table row within the <tbody>.

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

Dark table

Your awesome text goes here.

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

Contextual classes

Use contextual classes to color table rows or individual cells.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
4 Mark Otto @mdo
5 Jacob Thornton @fat
6 Larry the Bird @twitter
7 Jacob Thornton @fat
8 Larry the Bird @twitter
9 Jacob Thornton @fat
10 Larry the Bird @twitter

Captions Table

A <caption> functions like a heading for a table. It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it.

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

Small table

Add .table-sm to make tables more compact by cutting cell padding in half.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
© Dastone Crafted with by Mannatthemes