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 | Country |
---|---|---|---|
Risa D. Pearson | 336-508-2157 | July 24, 1950 | India |
Ann C. Thompson | 646-473-2057 | January 25, 1959 | USA |
Paul J. Friend | 281-308-0793 | September 1, 1939 | Canada |
Linda G. Smith | 606-253-1207 | May 3, 1962 | Brazil |
Inverse table
You can also invert the colors—with light text on dark backgrounds—with .table-dark
.
Name | Phone Number | Date of Birth | Country |
---|---|---|---|
Risa D. Pearson | 336-508-2157 | July 24, 1950 | Malaysia |
Ann C. Thompson | 646-473-2057 | January 25, 1959 | Belgium |
Paul J. Friend | 281-308-0793 | September 1, 1939 | Australia |
Sean C. Nguyen | 269-714-6825 | February 5, 1994 | Algeria |
Striped rows
Use .table-striped
to add zebra-striping to any table row
within the <tbody>
.
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 |
Cargo Pant & Shirt | FedEx |
|
Payment Failed |
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 |
Bordered table
Add .table-bordered
for borders on all sides of the table and cells.
Bordered color table
Add .table-bordered
& .border-primary
can be added to change colors.
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 |
Basic Borderless Example
Add .table-borderless
for a table without borders.
Name | Phone Number | Date of Birth | Country |
---|---|---|---|
Risa D. Pearson | 336-508-2157 | July 24, 1950 | India |
Ann C. Thompson | 646-473-2057 | January 25, 1959 | USA |
Paul J. Friend | 281-308-0793 | September 1, 1939 | Canada |
Linda G. Smith | 606-253-1207 | May 3, 1962 | Brazil |
Inverse Borderless table
Add .table-borderless
for a table without borders.
Name | Phone Number | Date of Birth | Country |
---|---|---|---|
Risa D. Pearson | 336-508-2157 | July 24, 1950 | Malaysia |
Ann C. Thompson | 646-473-2057 | January 25, 1959 | Belgium |
Paul J. Friend | 281-308-0793 | September 1, 1939 | Australia |
Sean C. Nguyen | 269-714-6825 | February 5, 1994 | Algeria |
Active tables
Highlight a table row or cell by adding a .table-active
class.
Name | Phone Number | Date of Birth | Country |
---|---|---|---|
Risa D. Pearson | 336-508-2157 | July 24, 1950 | Belgium |
Ann C. Thompson | 646-473-2057 | January 25, 1959 | Malaysia |
Paul J. Friend | 281-308-0793 | September 1, 1939 | Algeria |
Linda G. Smith | 606-253-1207 | Australia | |
Paul J. Friend | 281-308-0793 | September 1, 1939 | India |
Nesting
Border styles, active styles, and table variants are not inherited by nested tables.
Name | Phone Number | Date of Birth | Country | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Risa D. Pearson | 336-508-2157 | July 24, 1950 | India | ||||||||||||
|
|||||||||||||||
Linda G. Smith | 606-253-1207 | September 2, 1939 | Belgium |