Bootstrap Tables Documetation

Basic Tables

Using the most basic table markup, here’s how .table-based tables look in Bootstrap. All table styles are inherited in Bootstrap 4, meaning any nested tables will be styled in the same manner as the parent.

Bootstrap Tables Structure
                
                    <table class="table">
                      <thead>
                        <tr>
                          <th>#</th>
                          <th>Username</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <th scope="row">1</th>
                          <td>Mark</td>
                        </tr>
                        <tr>
                          <th scope="row">2</th>
                          <td>Jacob</td>
                        </tr>
                      </tbody>
                    </table>
                
            
Bootstrap Tables Options Class Description
Inverse table .table-inverse You can also invert the colors—with light text on dark backgrounds using this class.
Inverse table with info background .bg-* You can also invert different colors—with light text on dark backgrounds with info, success, warning and danger classes.
Table head options .thead-[default/inverse] Similar to default and inverse tables, use one of two modifier classes to make <thead>s appear light or dark gray.
Table head options with primary background .bg-* Use this class to make custom heading background to thead. You can also use Chameleon Admin color palette classes for background.
Striped rows .table-striped Use this class to add zebra-striping to any table row within the <tbody>.
Bordered table .table-bordered Use this class for borders on all sides of the table and cells.
Bordered striped .table-striped.table-bordered Use this class to add zebra-striping to any table row within the <tbody>.
Hoverable rows .table-hover Use this class to enable a hover state on table rows within a <tbody>.
Contextual classes .table-[active/*] Use contextual classes to color table rows or individual cells. You can use color options from THEME_COLOR
Responsive tables .table-responsive Use this class to create responsive tables by wrapping any .table to make them scroll horizontally on small devices.
Reflow .table-reflow Turn traditional tables on their side by using this class.

Bordered Tables

Table border classes allow you to set different types of table border like row, column & both borders. Also border less and color borders.

Tables Border Options Class Description
Table row borders .table This is a default table border style by bootstrap and attached to this class.
Table column borders .table-column Use this class with .table for table with column border.
Both borders .table-bordered Use this class with .table for both borders table.
Borderless table .table-borderless Use this class with .table for borderless table.
Solid border .border-solid Use this class to the table body row. This border style works only with row borders.
Double border .border-double Use this class to the table body row. This border style works only with row borders.
Border color .border-bottom-* you can set any of predefined colors by adding this class to the table row.