## 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 Robust 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.

#### Table Sizing

Different types of tables sizing examples like extra large, large, default, small & extra small.

Tables Sizing Options | Class | Description
--- | --- | ---
Extra large table | `.table-xl` | Use this class to the `.table` to create a table with extra large spacing. Extra larger table all rows have `1.25rem` height.
Large table | `.table-lg` | Use this class to the `.table` to create a table with large spacing. Larger table all rows have `0.9rem` height.
Default table | `.table-de` | Use this class to the `.table` to create a table with default spacing. Default table all rows have `0.75rem` height.
Small table | `.table-sm` | Use this class to the `.table` to create a table with small spacing. Small table all rows have `0.6rem` height.
Extra Small table | `.table-xs` | Use this class to the `.table` to create a table with extra small spacing. Extra small table all rows have `0.4rem` height.

#### Table Styling

Table styling classes help you to style table row background & border color, header and footer background color and table formatting purpose.

Tables Styling Options | Class | Description
--- | --- | ---
Default styling | `.table` | By default any table with this class has transparent background color.
Table header/footer styling | `.bg-*` | To use bootstrap brand color in the table header/footer, add this class to the header/footer row.
Contingent classes | `.bg-*` | Use this class to table row. You can also use lighten/darken colors with `.bg-lighten-*` or `.bg-darken-*` color.

Some more options for table stylings are as below:

Tables Styling Example | URL
--- | ---
Table header styling | https://pixinvent.com/bootstrap-admin-template/robust/html/ltr/vertical-menu-template/table-styling.html#header-styling
Table footer styling | https://pixinvent.com/bootstrap-admin-template/robust/html/ltr/vertical-menu-template/table-styling.html#footer-styling
Contingent classes | https://pixinvent.com/bootstrap-admin-template/robust/html/ltr/vertical-menu-template/table-styling.html#contingent
Custom row colors | https://pixinvent.com/bootstrap-admin-template/robust/html/ltr/vertical-menu-template/table-styling.html#row-color
Custom table formatting | https://pixinvent.com/bootstrap-admin-template/robust/html/ltr/vertical-menu-template/table-styling.html#table-formatting
Table formatting options | https://pixinvent.com/bootstrap-admin-template/robust/html/ltr/vertical-menu-template/table-styling.html#formatting-options

#### Table Components

Some Components used in tables also.

Some more options for using components are as below:

Component Example | URL
--- | ---
UI components | https://pixinvent.com/bootstrap-admin-template/robust/html/ltr/vertical-menu-template/table-components.html#ui
Alerts | https://pixinvent.com/bootstrap-admin-template/robust/html/ltr/vertical-menu-template/table-components.html#alerts
Callouts | https://pixinvent.com/bootstrap-admin-template/robust/html/ltr/vertical-menu-template/table-components.html#callouts
Progress | https://pixinvent.com/bootstrap-admin-template/robust/html/ltr/vertical-menu-template/table-components.html#progress
Checkboxes | https://pixinvent.com/bootstrap-admin-template/robust/html/ltr/vertical-menu-template/table-components.html#checkbox
Radio Buttons | https://pixinvent.com/bootstrap-admin-template/robust/html/ltr/vertical-menu-template/table-components.html#radio
Select | https://pixinvent.com/bootstrap-admin-template/robust/html/ltr/vertical-menu-template/table-components.html#select
Input | https://pixinvent.com/bootstrap-admin-template/robust/html/ltr/vertical-menu-template/table-components.html#input
Badges | https://pixinvent.com/bootstrap-admin-template/robust/html/ltr/vertical-menu-template/table-components.html#badges
Tooltip Triggers | https://pixinvent.com/bootstrap-admin-template/robust/html/ltr/vertical-menu-template/table-components.html#tooltip
Tags | https://pixinvent.com/bootstrap-admin-template/robust/html/ltr/vertical-menu-template/table-components.html#tags
Switch | https://pixinvent.com/bootstrap-admin-template/robust/html/ltr/vertical-menu-template/table-components.html#switch
Chart | https://pixinvent.com/bootstrap-admin-template/robust/html/ltr/vertical-menu-template/table-components.html#chart