Bootstrap 4 table classes are used to styling the tables such as changing the heading appearance, making the rows striped, adding the borders, etc. Bootstrap also provides classes for making tables responsive.
Simple Table:
The .table class is used to create a simple Bootstrap 4 table. This table has lightly padded cells and horizontal dividers. This class name is used with <table> tag to create a table.
Dark Table:
By using .table-dark class, you can create the black background of a table. Use .table-dark class within <table> tag.
Striped Table:
By using .table-striped class, you can create table with alternate background like zebra-stripes. Use the combination of .table and .table-striped classes within the <table> tag.
Note: For dark version of the stripped table adding an extra class .table-dark to the table.
Bordered and Borderless Table:
Use .table-bordered class to add border on all side of table and cell. If you don’t want to use border for a table, then use the .table-borderless class.
Hover Rows:
By using .table-hover class, you can add light gray background-color to rows when mousing over the table rows. Use the combination of .table and .table-hover classes within the <table> tag.
Table Head Styles:
You can add different background colors for the table head using the .thead-light or .thead-dark classes. These classes are added within the <thead> element.
Small Table:
If you find a table has too much padding, you can half the padding by using bootstrap .table-sm class. Use the combination of table, table-bordered and table-sm classes within the <table> tag.
Contextual Classes:
The contextual classes can be used to apply background-color of different rows or any specific cell. These classes can also be applied to <tr>, <td> and <th>.
List of these classes are: .table-primary, .table-success, .table-info, .table-danger, .table-warning, .table-active, .table-secondary, .table-light, and .table-dark.
Responsive Tables:
To make any table responsive just place the table inside an <div> element and apply the class .table-responsive on it. This will make your table scrollable (horizontally) and hence fits your table in small devices also. Similarly, to make the table responsive depending upon the viewport size, use class table-responsive{-sm|-md|-lg|-xl}.