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.