Unlimited Access

Upgrade to plan to get access to unlimited reports

Upgrade
Search something.. ⌘K
UI Components
Applications
Extra Pages
user-image English user-image Hindi user-image German user-image Italian user-image Spanish user-image Russian
Notifications
Mark as Read Delete All Do not Disturb Other Settings
Glady Haid commented on paces admin status
25m ago
Tommy Berry donated $100.00 for Carbon removal program
58m ago
You withdraw a $500 by New York ATM
2h ago
Richard Allen followed you in Facebook
3h ago
Victor Collier liked you recent photo in Instagram
10h ago

Hey! 👋
You have no any notifications

View All
slack Slack
Github Gitlab
dribbble Dribbble
bitbucket Bitbucket
dropbox Dropbox
G Suite G Cloud
bitbucket AWS
dropbox Server
G Suite Bootstrap
Welcome !
My Account Wallet : $985.25 Settings Support
Lock Screen Sign Out

Basic Tables

  1. Greeva
  2. Tables
  3. Basic Tables

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
table-user Risa D. Pearson AC336 508 2157 July 24, 1950
table-user Ann C. Thompson SB646 473 2057 January 25, 1959
table-user Paul J. Friend DL281 308 0793 September 1, 1939
table-user 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
table-user Risa D. Pearson AC336 508 2157 July 24, 1950
table-user Ann C. Thompson SB646 473 2057 January 25, 1959
table-user Paul J. Friend DL281 308 0793 September 1, 1939
table-user 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
table-user Risa D. Pearson AC336 508 2157 July 24, 1950
table-user Ann C. Thompson SB646 473 2057 January 25, 1959
table-user Paul J. Friend DL281 308 0793 September 1, 1939
table-user 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
table-user Risa D. Pearson AC336 508 2157 July 24, 1950
table-user Ann C. Thompson SB646 473 2057 January 25, 1959
table-user Paul J. Friend DL281 308 0793 September 1, 1939
table-user 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
Topbar Color
Light
Dark
Gradient
Menu Color
Light
Dark
Brand
Sidebar Size
Default
Compact
Condensed
Hover View
Full Layout
Hidden
Container Width
Layout Position