Notifications (5)
Clear All
View All Notification
Welcome!
My Account Pricing Help Lock screen
Logout
logo sm logo dark logo sm logo light

Basic Tables

  1. Tables
  2. Basic Tables
Basic Example

For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird Simsons @twitter
Variants

Use contextual classes to color tables, table rows or individual cells.

Class Heading Heading
Default Cell Cell
Primary Cell Cell
Secondary Cell Cell
Success Cell Cell
Danger Cell Cell
Warning Cell Cell
Info Cell Cell
Light Cell Cell
Dark Cell Cell
Striped Rows Table

Use .table-striped to add zebra-striping to any table row within the <tbody>.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird Simsons @twitter
Striped Rows Table Dark

Use .table-dark .table-striped to add zebra-striping to any table row within the <tbody>.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird Simsons @twitter
Striped Rows Table Success

Use .table-success .table-striped to add zebra-striping to any table row within the <tbody>.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird Simsons @twitter
Striped columns

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

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird Simsons @twitter
Striped columns Dar

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

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird Simsons @twitter
Striped columns Dar

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

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird Simsons @twitter
Hoverable rows

Add .table-hover to enable a hover state on table rows within a <tbody>.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird Simsons @twitter
Hoverable rows Dark

Add .table-dark .table-hover to enable a hover state on table rows within a <tbody>.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird Simsons @twitter
Active Tables

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

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird Simsons @twitter
Active Tables Dar

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

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird Simsons @twitter
Bordered Table

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

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird Simsons @twitter
Bordered color Table

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

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird Simsons @twitter
Tables without borders

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

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird Simsons @twitter
Tables without borders Dar

Add .table-borderless .table-dark for a table without borders and dark table.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird Simsons @twitter
Small tables

Add .table-sm to make any .table more compact by cutting all cell padding in half.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird Simsons @twitter
Small Tables Dar

Add .table-sm .table-dark to make any .table more compact by cutting all cell padding in half.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird Simsons @twitter
Table group dividers

Add a thicker border, darker between table groups—<thead>, <tbody>, and <tfoot>—with .table-group-divider. Customize the color by changing the border-top-color (which we don’t currently provide a utility class for at this time).

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird Simsons @twitter
Vertical alignment

Table cells of <thead> are always vertical aligned to the bottom. Table cells in <tbody> inherit their alignment from <table> and are aligned to the top by default. Use the vertical align classes to re-align where needed.

Heading 1 Heading 2 Heading 3 Heading 4
This cell inherits vertical-align: middle; from the table This cell inherits vertical-align: middle; from the table This cell inherits vertical-align: middle; from the table This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.
This cell inherits vertical-align: bottom; from the table row This cell inherits vertical-align: bottom; from the table row This cell inherits vertical-align: bottom; from the table row This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.
This cell inherits vertical-align: middle; from the table This cell inherits vertical-align: middle; from the table This cell is aligned to the top. This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.
Nesting Table

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

# First Last Handle
1 Mark Otto @mdo
Header Header Header
A First Last
B First Last
C First Last
3 Larry the Bird @twitter
Table head

Similar to tables and dark tables, use the modifier classes .table-lightto make <thead>s appear light or dark gray.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Table head Dar

Similar to tables and dark tables, use the modifier classes .table-dark to make <thead>s appear light or dark gray.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Table head Dar

Similar to tables and dark tables, use the modifier classes .table-dark to make <thead>s appear light or dark gray.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Footer Footer Footer Footer
Caption

A <caption> functions like a heading for a table. It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it.

List of users
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird Simsons @twitter
Caption

You can also put the <caption> on the top of the table with .caption-top

List of users
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Always responsive

Across every breakpoint, use .table-responsive for horizontally scrolling tables.

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

A list of all the users in your account including their name, title, email and role.

Name Title Email Role Action
Tony M. Carter
 Designer tonymcarter@jourrapide.com Member Edit
James E. Chamb
 UI/UX Designer jamesechambliss@teleworm.us Admin Edit
Charlotte J. Torres
 Copywriter charlotte@jourrapide.com Member Edit
Mary J. Germain
Full Stack maryjgermain@jourrapide.com CEO Edit
Kevin C. Reyes
 Director of Product kevincreyes@jourrapide.com Member Edit
With checkboxes

A list of all the users in your account including their name, title, email and role.

Name Title Email Role Action
Tony M. Carter Designer tonymcarter@jourrapide.com Member Edit
James E. Chamb UI/UX Designer jamesechambliss@teleworm.us Admin Edit
Charlotte J. Torres Copywriter charlotte@jourrapide.com Member Edit
Mary J. Germain Full Stack maryjgermain@jourrapide.com CEO Edit
Kevin C. Reyes Director of Product kevincreyes@jourrapide.com Member Edit
Nesting Table

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

Invoice Number Invoice Amount Confirmation by the client Planned payment date
F-011221/21 $ 879.500 11/05/2023 12/05/2023
ERP number Carrier legal entity Responsible logistician Status
3-128-3 ToBrookfield Asset Management
Kevin C. Reyes
 Verified
3-128-2 Brookfield Asset Management
Mary J. Germain
 Pending
3-128-1 Westfield Asset Management
Charlotte J. Torres
Rejected
F-011221/19 $ 93.250 9/05/2023 10/05/2023