Basic Table

Striped Rows

The .table-striped class adds zebra-stripes to a table:

Bordered Table

The .table-bordered class adds borders on all sides of the table and cells:

Hover Rows

The .table-hover class adds a hover effect (grey background color) on table rows:

Black/Dark Table

The .table-dark class adds a black background to the table:

Dark Striped Table

Combine .table-dark and .table-striped to create a dark, striped table:

Hoverable Dark Table

The .table-hover class adds a hover effect (grey background color) on table rows:

Borderless Table

The .table-borderless class removes borders from the table:

Contextual Classes

Contextual classes can be used to color the whole table (<table>), the table rows (<tr>) or table cells (<td>).

Table Head Colors

You can also use any of the contextual classes to only add a background color to the table header:

Small table

The .table-sm class makes the table smaller by cutting cell padding in half:

Responsive Tables

The .table-responsive class adds a scrollbar to the table when needed (when it is too big horizontally):

 <div class="table-responsive">
  <table class="table">
    ...
   </table>
 </div>