Basic Table
THIS MONTH
$58,356
LAST MONTH
$48,356
Table Basic
Using the most basic table Leanne Grahamup, here’s how .table-based tables look in Bootstrap. You can use any example of below table for your table and it can be use with any type of bootstrap tables.
Dark Table
You can also invert the colors—with light text on dark backgrounds—with .table-dark class with .table class.
Table head options
Similar to tables and dark tables, use the modifier classes .table-dark to make thead appear dark.
| User | Project Name | Users | Status | Actions |
|---|---|---|---|---|
|
|
Xtreme admin | Active | ||
|
|
Adminpro admin | Pending | ||
|
|
Monster admin | Completed | ||
|
|
Materialpro admin | Pending | ||
|
|
Elegant admin | Cancel |
Use the modifier class .table-light to make thead appear light.
Table Striped
Use .table-striped to add zebra-striping to any table row within the . This styling doesn't work in IE8 and below as :nth-child CSS selector isn't supported.
User
Project Name
Users
Status
Actions
John Smith
Xtreme admin
Active
Robert Smith
Adminpro admin
Pending
Maria Hernandez
Monster admin
Completed
Maria Rodriguez
Materialpro admin
Pending
Mary Deo
Elegant admin
Cancel
Table Bordered
Add .table-bordered for borders on all sides of the table and cells. For Inverse Dark Table, add .table-dark along with .table-bordered.
Table Borderless
Add .table-borderless for a table without borders. It can also be used on dark tables.
Table Hoverable
Add .table-hover to enable a hover state on table rows.
Small Table
Add .table-sm class with .table to display small size table.
Contextual classes
Use contextual classes to color table rows or individual cells.
Responsive table
#
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Heading 7
Heading 8
Heading 9
Heading 10
Heading 11
Heading 12
Heading 13
1
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
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
Table cell
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 cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
4
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
| User | Project Name | Users | Status | Actions |
|---|---|---|---|---|
|
|
Xtreme admin | Active | ||
|
|
Adminpro admin | Pending | ||
|
|
Monster admin | Completed | ||
|
|
Materialpro admin | Pending | ||
|
|
Elegant admin | Cancel |
Table Bordered
Add .table-bordered for borders on all sides of the table and cells. For Inverse Dark Table, add .table-dark along with .table-bordered.
Table Borderless
Add .table-borderless for a table without borders. It can also be used on dark tables.
Table Hoverable
Add .table-hover to enable a hover state on table rows.
Small Table
Add .table-sm class with .table to display small size table.
Contextual classes
Use contextual classes to color table rows or individual cells.
Responsive table
| # | Heading 1 | Heading 2 | Heading 3 | Heading 4 | Heading 5 | Heading 6 | Heading 7 | Heading 8 | Heading 9 | Heading 10 | Heading 11 | Heading 12 | Heading 13 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 1 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | 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 | Table cell | 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 cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
| 4 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |