Using the most basic table Leanne Grahamup, here’s how .table-based tables look in Bootstrap. You can use any example of below table for your table and it can be use with any type of bootstrap tables.

Example 1:Table with outer spacing

You can also invert the colors—with light text on dark backgrounds—with .table-inverse.

Similar to tables and dark tables, use the modifier classes .thead-lightor .thead-darkto make <thead>s appear light or dark gray.

Add .table-hover-animationto enable a hover stat with animation on table rows within a <tbody>.

Use .table-stripedto add zebra-striping to any table row within the <tbody>. This styling doesn't work in IE8 and below as :nth-childCSS selector isn't supported.

Use .table-darkwith .table-stripedto add zebra-striping to any inverse table row within the <tbody>. This styling doesn't work in IE8 and below as :nth-childCSS selector isn't supported.

Add .table-borderedfor borders on all sides of the table and cells. For Inverse Dark Table, add .table-darkalong with .table-bordered.

Add .table-borderlessfor a table without borders. It can also be used on dark tables.

Add .table-hoverto enable a hover state on table rows within a <tbody>.

Use contextual classes to color table rows or individual cells. Read full documnetation here.

Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by adding .table-responsiveclass on .table. Or, pick a maximum breakpoint with which to have a responsive table up to by adding .table-responsive{-sm|-md|-lg|-xl}. Read full documnetation here.

Always responsive