How to Format Tables Using Bootstrap
Bootstrap provides a nice and clean layout for building tables. If you want some light padding and horizontal dividers, add the base class: .table to <table> element. Along with the base table class, you can use additional classes to style the table.
1. Striped Rows
Use .table-striped class to add zebra-striping to a table within the <tbody>.
2. Striped Columns
Use .table-striped-columns to add zebra-striping to any table column.
3. Hover Rows
Add .table-hover to enable a hover state (grey background color) on table rows within a <tbody>.
4. Bordered Tables
Add .table-bordered for borders on all sides of the table and cells.
5. Tables without borders
Add .table-borderless for a table without borders.
6. Small Tables
Add .table-sm to make the table more compact by cutting all cell padding in half.
7. Table Group Dividers
Add a thicker border, darker between table groups - <thead>, <tbody>, and <tfoot> with .table-group-divider.
8. Table Head
Use the modifier classes .table-light or .table-dark to make <thead>s appear light or dark gray.
9. Responsive Tables
Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by adding .table-responsive class.