Bootstrap 5 Tables
Bootstrap 5 includes table classes that assist with building consistently styled and responsive tables.
Bootstrap doesn't provide any default styling for tables. In other words, Bootstrap's table styles are opt-in. To use Bootstrap's styles for tables, use Bootstrap's .table class, then apply any additional modifier classes or custom styles as required.
Also, Bootstrap's table styles are not inherited, meaning any nested tables can be styled independent from the parent.
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.
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).
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).
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.
This can also be applied at the table level:
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, .table-responsive-xl and .table-responsive-xxl.
From that breakpoint and up, the table will behave normally and not scroll horizontally.