Striped rows
Striped rows example
<table class="table table-striped">
...
</table>
<table class="table table-dark table-striped">
...
</table>
Hoverable rows
Hovering effect table example
<table class="table table-hover">
...
</table>
<table class="table table-dark table-hover">
...
</table>
Active tables
Active table tr or td example
<table class="table">
<thead>
...
</thead>
<tbody>
<tr class="table-active">
<td>1</td>
<td>Ali</td>
</tr>
<tr>
<td>1</td>
<td class="table-active">Ali</td>
</tr>
</tbody>
</table>
Bordered tables
Add border to your tables
<table class="table table-bordered">
...
</table>
Tables without borders
Make yout table without borders
<table class="table table-borderless">
...
</table>
Small tables
Make responsive tables
<table class="table table-sm">
...
</table>
Vertical alignment
Table aligment example
<div class="table-responsive">
<table class="table align-middle">
<thead>
<tr>
...
</tr>
</thead>
<tbody>
<tr>
...
</tr>
<tr class="align-bottom">
...
</tr>
<tr>
<td>...</td>
<td>...</td>
<td class="align-top">This cell is aligned to the top.</td>
<td>...</td>
</tr>
</tbody>
</table>
</div>
Nesting
Add the nesting tables
<table class="table table-striped">
<thead>
...
</thead>
<tbody>
...
<tr>
<td colspan="4">
<table class="table mb-0">
...
</table>
</td>
</tr>
...
</tbody>
</table>
Anatomy of tables
<table class="table">
<caption>List of users</caption>
<thead>
...
</thead>
<tbody>
...
</tbody>
<tfoot>
...
</tfoot>
</table>
Responsive Tables
Responsive table example
<div class="table-responsive">
<table class="table">
...
</table>
</div>
Breakpoint specific
Specific screen reponsive table example
