Basic Table
Simple Table
Using the most basic table need to add .table class to table tag
| Id | Name | Position | Office | Age | Salary |
|---|---|---|---|---|---|
| 1 | Tiger Nixon | Architect | Edinburgh | 61 | $320,800 |
| 2 | Garrett | Accountant | Tokyo | 63 | $170,750 |
| 3 | Ashton Cox | Technical | Francisco | 66 | $86,000 |
| 4 | Cedric Kelly | Developer | Edinburgh | 22 | $433,060 |
| 5 | Airi Satou | Accountant | Tokyo | 33 | $162,700 |
| 6 | Williamson | Integration | New York | 61 | $372,000 |
Bordered Tables With Striped
Using the border table need to add .table-bordered class to table tag and
.table-striped class for Strip table
| Id | Name | Position | Office | Age | Salary |
|---|---|---|---|---|---|
| 1 | Tiger Nixon | Architect | Edinburgh | 61 | $320,800 |
| 2 | Garrett | Accountant | Tokyo | 63 | $170,750 |
| 3 | Ashton Cox | Technical | Francisco | 66 | $86,000 |
| 4 | Cedric Kelly | Developer | Edinburgh | 22 | $433,060 |
| 5 | Airi Satou | Accountant | Tokyo | 33 | $162,700 |
Hoverable Table
Using the Hoverable table need to add class to table tag
| Id | Name | Position | Office | Age | Salary |
|---|---|---|---|---|---|
| 1 | Tiger Nixon | Architect | Edinburgh | 61 | $320,800 |
| 2 | Garrett | Accountant | Tokyo | 63 | $170,750 |
| 3 | Ashton Cox | Technical | Francisco | 66 | $86,000 |
| 4 | Cedric Kelly | Developer | Edinburgh | 22 | $433,060 |
| 5 | Airi Satou | Accountant | Tokyo | 33 | $162,700 |
| 6 | Williamson | Integration | New York | 61 | $372,000 |
Tables Without Borders
Using the borderless table need to add .table-borderless class to table tag
| Id | Name | Position | Office | Age | Salary |
|---|---|---|---|---|---|
| 1 | Tiger Nixon | Architect | Edinburgh | 61 | $320,800 |
| 2 | Garrett | Accountant | Tokyo | 63 | $170,750 |
| 3 | Ashton Cox | Technical | Francisco | 66 | $86,000 |
| 4 | Cedric Kelly | Developer | Edinburgh | 22 | $433,060 |
| 5 | Airi Satou | Accountant | Tokyo | 33 | $162,700 |
| 6 | Williamson | Integration | New York | 61 | $372,000 |
Dark Table
Using the Dark table need to add .table-dark class to table tag
| Id | Name | Position | Office | Age | Salary |
|---|---|---|---|---|---|
| 1 | Tiger Nixon | Architect | Edinburgh | 61 | $320,800 |
| 2 | Garrett | Accountant | Tokyo | 63 | $170,750 |
| 3 | Ashton Cox | Technical | Francisco | 66 | $86,000 |
| 4 | Cedric Kelly | Developer | Edinburgh | 22 | $433,060 |
| 5 | Airi Satou | Accountant | Tokyo | 33 | $162,700 |
| 6 | Williamson | Integration | New York | 61 | $372,000 |
Primary Table With Striped
Using the primary table need to add .table-primary class to table tag
| Id | Name | Position | Office | Age | Salary |
|---|---|---|---|---|---|
| 1 | Tiger Nixon | Architect | Edinburgh | 61 | $320,800 |
| 2 | Garrett | Accountant | Tokyo | 63 | $170,750 |
| 3 | Ashton Cox | Technical | Francisco | 66 | $86,000 |
| 4 | Cedric Kelly | Developer | Edinburgh | 22 | $433,060 |
| 5 | Airi Satou | Accountant | Tokyo | 33 | $162,700 |
| 6 | Williamson | Integration | New York | 61 | $372,000 |
Small Table
Using the small table need to add .table-sm class to table tag
| Id | Name | Position | Office | Age | Salary |
|---|---|---|---|---|---|
| 1 | Tiger Nixon | Architect | Edinburgh | 61 | $320,800 |
| 2 | Garrett | Accountant | Tokyo | 63 | $170,750 |
| 3 | Ashton Cox | Technical | Francisco | 66 | $86,000 |
| 4 | Cedric Kelly | Developer | Edinburgh | 22 | $433,060 |
| 5 | Airi Satou | Accountant | Tokyo | 33 | $162,700 |
| 6 | Williamson | Integration | New York | 61 | $372,000 |
Large Table
Using the large table need to add .table-lg class to table tag
| Id | Name | Position | Office | Age | Salary |
|---|---|---|---|---|---|
| 1 | Tiger Nixon | Architect | Edinburgh | 61 | $320,800 |
| 2 | Garrett | Accountant | Tokyo | 63 | $170,750 |
| 3 | Ashton Cox | Technical | Francisco | 66 | $86,000 |
| 6 | Williamson | Integration | New York | 61 | $372,000 |
Table With Bottom Border
Using the bottom bordered table need to add .table-bottom-border class to table tag
| Id | Name | Position | Office | Age | Salary |
|---|---|---|---|---|---|
| 1 | Tiger Nixon | Architect | Edinburgh | 61 | $320,800 |
| 2 | Garrett | Accountant | Tokyo | 63 | $170,750 |
| 3 | Ashton Cox | Technical | Francisco | 66 | $86,000 |
| 4 | Evert | Williamson | New York | 60 | $36,000 |
| 5 | Murazik | Wava | New York | 49 | $62,000 |
| 6 | Williamson | Integration | New York | 56 | $894,000 |
Table Striped Columns
Using the column strip table need to add .table-striped-columns class to table tag
| Id | Name | Position | Office | Age | Salary |
|---|---|---|---|---|---|
| 1 | Tiger Nixon | Architect | Edinburgh | 61 | $320,800 |
| 2 | Garrett | Accountant | Tokyo | 63 | $170,750 |
| 3 | Ashton Cox | Technical | Francisco | 66 | $86,000 |
| 4 | Evert | Williamson | New York | 60 | $36,000 |
| 5 | Murazik | Wava | New York | 49 | $62,000 |
| 6 | Williamson | Integration | New York | 56 | $894,000 |
Table Variants
Using the Color Variants table need to add .table-Variants class to table tag
| Id | Name | Position | Office | Age | Salary |
|---|---|---|---|---|---|
| 1 | Tiger Nixon | Architect | Edinburgh | 61 | $320,800 |
| 2 | Garrett | Accountant | Tokyo | 63 | $170,750 |
| 3 | Ashton Cox | Technical | Francisco | 66 | $86,000 |
| 4 | Evert | Williamson | New York | 60 | $36,000 |
| 5 | Murazik | Wava | New York | 49 | $62,000 |
| 6 | Williamson | Integration | New York | 56 | $894,000 |
| 6 | Williamson | Integration | New York | 56 | $894,000 |
| 6 | Williamson | Integration | New York | 56 | $894,000 |
Nesting Table
Border styles, active styles, and table variants are not inherited by nested tables.
| # | First | Last | Handle | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 1 | Mark | Otto | @mdo | |||||||||
|
||||||||||||
| 3 | Larry | the Bird | ||||||||||
| 4 | Einar | Miller | ||||||||||
| 5 | Layne | Paucek | ||||||||||
Two Way Table
Using the two direction table need to add .text-end class to last table head table
data
| Name | Salary |
|---|---|
| Tiger Nixon | $320,800 |
| Garrett | $170,750 |
| Ashton Cox | $86,000 |
| Williamson | $547,000 |
| Evie Wunsch | $372,000 |
Always Responsive
Across every breakpoint, use .table-responsive for horizontally scrolling tables.
Breakpoint specific
Use .table-responsive{-sm|-md|-lg|-xl|-xxl} as needed to create responsive tables
up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not
scroll horizontally.
| # | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading |
|---|---|---|---|---|---|---|---|---|---|
| 1 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| 2 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| 3 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| 4 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
Orders
Last 2 Month Report
| Id | Product | Qty | Status | Delivery Date | Amount | Progress | Action |
|---|---|---|---|---|---|---|---|
| #LA456 |
T-shirt#389456 |
5 | Oct 27, 2024 | Available | $590 |
|
|
| #LA647 |
Watch#487439 |
2 | Aug 10, 2024 | No Available | $890 |
|
|
| #LA438 |
Headphones#738456 |
3 | Jan 28, 2024 | No Available | $500 |
|
|
| #LA930 |
Iphone#564782 |
1 | Mar 14, 2024 | Available | $1k |
|
|
| #LA263 |
Shose#934890 |
1 | Mar 30, 2024 | No Available | $890 |
|
|
| #LA395 |
Man's Watch#567892 |
2 | Dec 26, 2024 | No Available | $190 |
|
|
| Id | Product | Qty | Status | Delivery Date | Amount | Progress | Action |
|---|---|---|---|---|---|---|---|
| #LA284 |
T-shirt#389456 |
5 | Apr 24, 2024 | Available | $590 |
|
|
| #LA743 |
Headphone#738456 |
3 | Aug 16, 2024 | No Available | $500 |
|
|
| #LA839 |
I-phone#564782 |
1 | May 13, 2024 | Available | $1k |
|
|
| #LA384 |
T-shirt#936478 |
2 | Oct 09, 2024 | Available | $200 |
|
|
| #LA6372 |
Shose#934890 |
1 | Jul 11, 2024 | No Available | $890 |
|
|
| #LA564 |
Man's Watch#567892 |
2 | Dec 14, 2024 | No Available | $190 |
|
|
| Id | Product | Qty | Status | Delivery Date | Amount | Progress | Action |
|---|---|---|---|---|---|---|---|
| #LA475 |
Lipstick#389456 |
5 | Apr 01, 2024 | Available | $590 |
|
|
| #LA374 |
Lipliner#487439 |
2 | Sep 06, 2024 | No Available | $890 |
|
|
| #LA734 |
Cap#738456 |
3 | Jun 08, 2024 | No Available | $500 |
|
|
| #LA857 |
EyeShadow-Brush#564782 |
1 | Dec 22, 2024 | Available | $1k |
|
|
| #LA586 |
Watch#936478 |
2 | May 26, 2024 | Available | $200 |
|
|
| #LA374 |
Cansiler stick#567892 |
2 | Nov 19, 2024 | No Available | $190 |
|
|
| Id | Product | Qty | Status | Delivery Date | Amount | Progress | Action |
|---|---|---|---|---|---|---|---|
| #la736 |
T-shirt#389456 |
5 | Mar 16, 2024 | Available | $590 |
|
|
| #LA956 |
Bottle#487439 |
2 | Jul 12, 2024 | No Available | $890 |
|
|
| #LA743 |
Headphones#564782 |
1 | Mar 21, 2024 | Available | $1k |
|
|
| #LA424 |
Cap#936478 |
2 | Apr 02, 2024 | Available | $200 |
|
|
| #LA174 |
Brush#934890 |
1 | Sep 18, 2024 | No Available | $890 |
|
|
| #LA262 |
LipStick#567892 |
2 | Aug 07, 2024 | No Available | $190 |
|
|
Custom Table
| Members | Task | Status | Hours |
|---|---|---|---|
Mark McKenzieFull stack developer |
21 | High | 3H 09M |
Smith AcresUI/UX designer |
12 | Medium | 1H 24M |
Emery McKenzieUI/UX designer |
5 | Low | 1H 0M |
Lenora BogisichReact Developer |
28 | High | 3H 19M |
Davis WelshUI/UX designer |
9 | Medium | 1H 09M |
Fleta WalshWed Designer |
20 | High | 2H 45M |
Amelia DevBackend Developer |
20 | High | 2H 45M |