Basic Tables
Basic example
For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>.
| Name | Phone Number | Date of Birth | Active? |
|---|---|---|---|
| Risa D. Pearson | 336-508-2157 | July 24, 1950 |
|
| Ann C. Thompson | 646-473-2057 | January 25, 1959 |
|
| Paul J. Friend | 281-308-0793 | September 1, 1939 |
|
| Linda G. Smith | 606-253-1207 | May 3, 1962 |
|
Inverse table
You can also invert the colors—with light text on dark backgrounds—with .table-dark.
| Name | Phone Number | Date of Birth | Active? |
|---|---|---|---|
| Risa D. Pearson | 336-508-2157 | July 24, 1950 |
|
| Ann C. Thompson | 646-473-2057 | January 25, 1959 |
|
| Paul J. Friend | 281-308-0793 | September 1, 1939 |
|
| Sean C. Nguyen | 269-714-6825 | February 5, 1994 |
|
Striped rows
Use .table-striped to add zebra-striping to any table row
within the <tbody>.
Ann C. Thompson
Sean C. Nguyen
Bordered table
Add .table-bordered for borders on all sides of the table and cells.
Risa D. Pearson
Ann C. Thompson
Paul J. Friend
Sean C. Nguyen
Hoverable rows
Add .table-hover to enable a hover state on table rows within a <tbody>.
| Product | Price | Quantity | Amount |
|---|---|---|---|
| ASOS Ridley High Waist | $79.49 | 82 Pcs | $6,518.18 |
| Marco Lightweight Shirt | $128.50 | 37 Pcs | $4,754.50 |
| Half Sleeve Shirt | $39.99 | 64 Pcs | $2,559.36 |
| Lightweight Jacket | $20.00 | 184 Pcs | $3,680.00 |
Small table
Add .table-sm to make tables more compact by cutting cell padding in half.
| Product | Price | Quantity | Amount |
|---|---|---|---|
| ASOS Ridley High Waist | $79.49 | 82 Pcs | $6,518.18 |
| Marco Lightweight Shirt | $128.50 | 37 Pcs | $4,754.50 |
| Half Sleeve Shirt | $39.99 | 64 Pcs | $2,559.36 |
| Lightweight Jacket | $20.00 | 184 Pcs | $3,680.00 |
| Marco Shoes | $28.49 | 69 Pcs | $1,965.81 |
| ASOS Ridley High Waist | $79.49 | 82 Pcs | $6,518.18 |
Table head options
Use one of two modifier classes to make <thead>s appear light or dark gray.
| Product | Courier | Process | Status |
|---|---|---|---|
| ASOS Ridley High Waist | FedEx |
|
Delivered |
| Marco Lightweight Shirt | DHL |
|
Shipped |
| Half Sleeve Shirt | Bright |
|
Order Received |
| Lightweight Jacket | FedEx |
|
Delivered |
Contextual with background color
Use contextual classes to color table rows or individual cells.
| Product | Courier | Process | Status |
|---|---|---|---|
| ASOS Ridley High Waist | FedEx |
|
Delivered |
| Marco Lightweight Shirt | DHL |
|
Shipped |
| Half Sleeve Shirt | Bright |
|
Order Received |
| Lightweight Jacket | FedEx |
|
Delivered |
Always responsive
Across every breakpoint, use
.table-responsive for horizontally scrolling tables. Use
.table-responsive{-sm|-md|-lg|-xl} 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 |