Example of a basic table. For basic styling (light padding and only horizontal dividers) add the base class .table to any <table>. It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate our custom table styles.

Example of a table with striped rows. Use .table-striped added to the base .table class to add zebra-striping to any table odd row within the <tbody>. This styling doesn't work in IE8 and lower as :nth-child CSS selector isn't supported in these browser versions. Striped table can be combined with other table styles.

Example of a table with fully bordered cells. Add .table-bordered to the base .table class for borders on all sides of the table and cells. This is a default Bootstrap option for the table, for more advanced border options check Table borders page. Bordered table can be combined with other table styles.

Example of a bordered table with stiped rows. Add .table-bordered and .table-striped classes to the base .table class for borders and row striping. This method works with all table border options.

Example of a table with hover rows state. Add .table-hover to enable a hover state on table rows within a <tbody>.

Example of a scrollable table. To use a fixed height with scrolling, wrap any table in a div with .table-scrollable class. Max height of the table container will be 22.5rem and table will get a vertical scrollbar if its height exceeds this value.

Example of a table placed inside card body. Such tables always have additional whitespace taken from .card-body element padding.

Example of framed table inside card body. Tables that placed inside card body don't have border around them by default, .table-framed class adds border around the table.

Example of bordered framed table inside card body. By default bordered table also doesn't have a border, to use border around the bordered table add .table-framed to the <table>.