Basic example

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

Inverse table

You can also invert the colors—with light text on dark backgrounds—with .table-dark.

Table head options

Use one of two modifier classes to make <thead>s appear light or dark gray.

Striped rows

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

Bordered table

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

Bordered color table

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

Small table

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

Contextual classes

Use contextual classes to color table rows or individual cells.

Table head options

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

Contextual classes with Background color

You can also invert the colors—with light text on dark backgrounds—with .table-dark.

Borderless table

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

Borderless Inverse table

Your awesome text goes here.Your awesome text goes here.

Hoverable rows

Create responsive tables by wrapping any .table in .table-responsive to make them scroll horizontally on small devices (under 768px).

Active tables

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

Nesting

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

Table foot