Bootstrap Tables

Just add the base class .table to any <table> and extend with custom styles or various modifier classes. Using the most basic table markup, here’s how .table-based tables look in Bootstrap. All table styles are inherited, meaning any nested tables will be styled in the same manner as the parent.

Following are the options that can be used with table.table.

Options Class Description
Inverse table .table-dark Use this class along with table.table to invert the colors — with light text on dark backgrounds.
Inverse table head .table-dark Use this class along with table.table thead to invert the colors in thead — with light text on dark backgrounds.
Striped Table .table-striped Use this class along with table.table to add zebra-striping to any table row within tbody.
Striped with Inverse Table .table-striped.table-dark Use these classes along with table.table to add zebra-striping to a table row within tbody along with inverted colors — with light text on dark backgrounds.
Bordered Table .table-bordered Use this class for borders on all sides of the table and cells.
Borderless Table .table-borderless Use this class to remove borders on all sides of the table and cells.
Hoverable rows .table-hover Add .table-hover to enable a hover state on table rows within a <tbody>.
Small Table .table-sm Use this class to make tables more compact by cutting cell padding.
Contextual Classes .table-{value}, .bg-{color}

Use contextual classes along with <tr> or <td> to color table rows or individual cells respectively.

value: [active | primary | secondary | success | danger | warning | info | light | dark]

color: [primary | secondary | success | danger | warning | info | dark]

Responsive tables .table-responsive or .table-responsive-{size}

Responsive tables allow tables to be scrolled horizontally with ease. Use this class as a wrapper of table.table.

size: [sm | md | lg | xl]

Refer following links for detailed documentation, configuration options, methods and examples: