Tables
You can create tables with basic styling that has horizontal dividers and small cell padding (8px by default), by just adding the Bootstrap's class .table to the (table) element.
Row |
First Name |
Last Name |
Email |
1 |
John |
Carter |
johncarter@mail.com |
2 |
Peter |
Parker |
peterparker@mail.com |
3 |
John |
Rambo |
johnrambo@mail.com |
4 |
Juna |
Doe |
johnrambo@mail.com |
5 |
Alea |
Smith |
johnrambo@mail.com |
6 |
Resa |
Parker |
johnrambo@mail.com |
Tables with Alternate Background (striped)
Row |
First Name |
Last Name |
Email |
1 |
John |
Carter |
johncarter@mail.com |
2 |
Peter |
Parker |
peterparker@mail.com |
3 |
John |
Rambo |
johnrambo@mail.com |
4 |
Juna |
Doe |
johnrambo@mail.com |
5 |
Alea |
Smith |
johnrambo@mail.com |
6 |
Resa |
Parker |
johnrambo@mail.com |
Row |
First Name |
Last Name |
Email |
1 |
John |
Carter |
johncarter@mail.com |
2 |
Peter |
Parker |
peterparker@mail.com |
3 |
John |
Rambo |
johnrambo@mail.com |
4 |
Juna |
Doe |
johnrambo@mail.com |
5 |
Alea |
Smith |
johnrambo@mail.com |
6 |
Resa |
Parker |
johnrambo@mail.com |
Hover State on Table Rows
Row |
First Name |
Last Name |
Email |
1 |
John |
Carter |
johncarter@mail.com |
2 |
Peter |
Parker |
peterparker@mail.com |
3 |
John |
Rambo |
johnrambo@mail.com |
4 |
Juna |
Doe |
johnrambo@mail.com |
5 |
Alea |
Smith |
johnrambo@mail.com |
6 |
Resa |
Parker |
johnrambo@mail.com |
Row |
First Name |
Last Name |
Email |
1 |
John |
Carter |
johncarter@mail.com |
2 |
Peter |
Parker |
peterparker@mail.com |
3 |
John |
Rambo |
johnrambo@mail.com |
4 |
Juna |
Doe |
johnrambo@mail.com |
5 |
Alea |
Smith |
johnrambo@mail.com |
6 |
Resa |
Parker |
johnrambo@mail.com |
Emphasis Classes on Table Rows
Class |
Description |
.active |
Applies the hover color to a particular row or cell |
.success |
Indicates a successful or positive action |
.info |
Indicates a neutral informative change or action |
.warning |
Indicates a warning that might need attention |
.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 |