Basic Tables
Using the most basic table markup, here’s how .table
based tables look in Bootstrap.
All table styles are inherited from 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 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 |
Wrap .table with .table-responsive to get responsive table. |
Refer following links for usage:
Type | URL |
---|---|
Plugin Link | https://getbootstrap.com/docs/4.3/content/tables/ |
Template Page | https://pixinvent.com/frest-clean-bootstrap-admin-dashboard-template/html/ltr/vertical-menu-template/table.html |