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
HTML
<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. |
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. |