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>
Tables List
| Bootstrap Tables Options | Class | Description |
|---|---|---|
| Inverse table | .table-inverse |
You can also invert the colors—with light text on dark backgrounds using this class. |
| Table Hover Animation | .table-hover-animation |
Add .table-hover-animation to enable a hover stat with animation on table rows within a <tbody>. |
| Table Striped | .table-striped |
Use .table-striped to add zebra-striping to any table row within the <tbody> |
| Bordered Table | .table-bordered |
Add .table-bordered for borders on all sides of the table and cells. |
| Borderless Table | .table-borderless |
Add .table-borderless for a table without borders. |
| Hoverable rows | .table-hover |
Add .table-hover to enable a hover state on table rows within a <tbody>. |
| Responsive tables | .table-responsive |
Responsive tables allow tables to be scrolled horizontally with ease. Use .table-responsive along with .table. |
Refer following links for usage:
| Type | URL |
|---|---|
| Plugin Link | https://getbootstrap.com/docs/4.3/content/tables/ |
| Template Page | https://pixinvent.com/vuexy-html-bootstrap-admin-template/html/ltr/vertical-menu-template/table.html |