In this recipe, we have used default Bootstrap 4 table-specific classes to create a number of color combinations. To center the text in the tables, we used the .text-center class. However, this still does not center the text in <thead>, so we had to follow the advice on how to solve it as explained on the Bootstrap issue page, at https://github.com/twbs/bootstrap/issues/16146.
With the use of Font Awesome icons, we further improved our tables.
It is important to note that if we used just the .table-responsive class on its own, our table would shrink to wrap its content. This means that the table in our example would never span 100% of its parent container. To rectify this, and make the tables span 100% of the available space ...
