Bootstrap 3 Tables

Bootstrap includes classes for styling tables.

You can choose from a number of classes when using tables. The Bootstrap table classes include styles for padding and displaying borders and row background colors. There's also a class for a hover over effect.

Basic Table

For a basic table with lightly padded cells and horizontal dividers, apply Bootstrap's .table class to the <table> element.

Striped Table

For alternating background colors on the rows, add Bootstrap's .table-striped class (while keeping the .table class in place).

Bordered Table

For borders all around the table, use Bootstrap's .table-bordered class (while keeping the .table class in place).

Hover Rows

To achieve that "hover" effect when mousing over the table rows, use Bootstrap's .table-hover class (while keeping the .table class in place).

Condensed Table

If you find a table has too much padding, you can half the padding by using Bootstrap's .table-condensed class (while keeping the .table class in place).

Contextual Classes

You can apply color to individual rows or cells by using Bootstrap's contextual classes.

Responsive Tables

Responsive tables automatically create horizontal scrollbars when viewed on small devices or viewports (under 768 pixels). Actually, the table is nested inside a <div> which grows scrollbars.

To do this, nest the <table> element inside a <div> element with the .table-responsive class applied.