Bootstrap 4 Tables
Bootstrap 4 added some new table classes that assist with building consistently styled and responsive tables.
Basic Table
For a basic table with lightly padded cells and horizontal dividers, apply Bootstrap's .table class to the <table> element.
Dark Table
You can use the .table-dark class to invert the colors so that it has light text on a dark background.
New in Bootstrap 4
Dark tables are new in Bootstrap 4.
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).
Table Head Styles
You can add a background color to the <thead> element by using either .thead-default or .thead-inverse.
Light
Use the .thead-light class.
Dark
Use the .thead-dark class.
New in Bootstrap 4
Table head styles are new in Bootstrap 4.
Small/Condensed Table
If you find a table has too much padding, you can half the padding by using Bootstrap's .table-sm class (while keeping the .table class in place).
Bootstrap 4 vs Bootstrap 3
Note that, while Bootstrap 4 uses .table-sm to condense a table, Bootstrap 3 uses .table-condensed. Both cut cell padding in half.
Contextual Classes
You can apply color to individual rows or cells by using Bootstrap's contextual classes.
The 5 contextual classes are: .table-active, .table-success, .table-info, .table-warning, and .table-danger.
Bootstrap 4 vs Bootstrap 3
Bootstrap 3 doesn't use the .table- prefix for its contextual classes.
For example, Bootstrap 3 uses .active whereas Bootstrap 4 uses .table-active. Other than that, both versions use the same 5 contextual keywords (active, success, info, warning, danger).
Responsive Tables
Responsive tables automatically create horizontal scrollbars when viewed on devices smaller than a given breakpoint.
To create a responsive table, enclose the table in a <div> element that has the .table-responsive class (or one of the .table-responsive-* classes) applied.
The .table-responsive-* classes can be used to specify a specific breakpoint. They are .table-responsive-sm, .table-responsive-md, .table-responsive-lg, and .table-responsive-xl.
From that breakpoint and up, the table will behave normally and not scroll horizontally.
The .table-responsive class is equivalent to .table-responsive-md.