#### My Table

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>`.

User | Account No. | Balance | Action
--- | --- | --- | ---
Risa D. Pearson | AC336 508 2157 | July 24, 1950 |
Ann C. Thompson | SB646 473 2057 | January 25, 1959 |
Paul J. Friend | DL281 308 0793 | September 1, 1939 |
Sean C. Nguyen | CA269 714 6825 | February 5, 1994 |

#### Striped Columns

Use `.table-striped-columns` to add zebra-striping to any table column.

User | Account No. | Balance | Action
--- | --- | --- | ---
Risa D. Pearson | AC336 508 2157 | July 24, 1950 |
Ann C. Thompson | SB646 473 2057 | January 25, 1959 |
Paul J. Friend | DL281 308 0793 | September 1, 1939 |
Sean C. Nguyen | CA269 714 6825 | February 5, 1994 |

#### 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

#### 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

#### 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

#### Inverse 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

#### Bordered Table

Add `.table-bordered` for borders on all sides of the table and cells.

User | Account No. | Balance | Action
--- | --- | --- | ---
Risa D. Pearson | AC336 508 2157 | July 24, 1950 |
Ann C. Thompson | SB646 473 2057 | January 25, 1959 |
Paul J. Friend | DL281 308 0793 | September 1, 1939 |
Sean C. Nguyen | CA269 714 6825 | February 5, 1994 |

#### Bordered Color Table

Add `.table-bordered` & `.border-primary` can be added to change colors.

User | Account No. | Balance | Action
--- | --- | --- | ---
Risa D. Pearson | AC336 508 2157 | July 24, 1950 |
Ann C. Thompson | SB646 473 2057 | January 25, 1959 |
Paul J. Friend | DL281 308 0793 | September 1, 1939 |
Sean C. Nguyen | CA269 714 6825 | February 5, 1994 |

#### 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 | 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 Borderless Table

Add `.table-borderless` for a table without borders.

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 |

#### Active Tables

Highlight a table row or cell by adding a `.table-active` class.

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 |
Paul J. Friend | 281-308-0793 | September 1, 1939 |

#### Nesting

Border styles, active styles, and table variants are not inherited by nested tables.

Name | Phone Number | Date of Birth | Active?
--- | --- | --- | ---
Risa D. Pearson | 336-508-2157 | July 24, 1950 |
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 |
Linda G. Smith | 606-253-1207 | September 2, 1939 |

#### 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 Foot

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
Footer | Footer | Footer | Footer

#### Captions

Add `.table-sm` to make tables more compact by cutting cell padding in half.

List of users
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

#### Caption Top

Add `.table-sm` to make tables more compact by cutting cell padding in half.

List of users
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

##### Theme Settings

##### Color Scheme

##### Light

##### Dark

##### Layout Mode

##### Fluid

##### Detached

##### Menu Color

##### Light

##### Dark

##### Sidebar Size

##### Default

##### Compact

##### Condensed

##### Hover View

##### Full Layout

##### Hidden

##### Container Width

Full Boxed

##### Layout Position

Fixed Scrollable
Buy Now