Table styles
Flexible, reusable patterns for the interface you want to build.
Striped rows
| Customer | Amount | Status |
|---|---|---|
| Alex Morgan | $129 | Paid |
| Sara Wilson | $249 | Paid |
| Omar Hassan | $89 | Pending |
| Lina Davis | $149 | Active |
| Adam Clark | $79 | Cancelled |
View HTML example
<div class="library-table-scroll">
<table class="sample-table table-striped">
<caption class="sr-only">Striped rows</caption>
<thead>
<tr>
<th scope="col">Customer</th>
<th scope="col">Amount</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Alex Morgan</th>
<td>$129</td>
<td>
<span class="badge badge-paid">
<span>
</span>Paid</span>
</td>
</tr>
<tr>
<th scope="row">Sara Wilson</th>
<td>$249</td>
<td>
<span class="badge badge-paid">
<span>
</span>Paid</span>
</td>
</tr>
<tr>
<th scope="row">Omar Hassan</th>
<td>$89</td>
<td>
<span class="badge badge-pending">
<span>
</span>Pending</span>
</td>
</tr>
<tr>
<th scope="row">Lina Davis</th>
<td>$149</td>
<td>
<span class="badge badge-active">
<span>
</span>Active</span>
</td>
</tr>
<tr>
<th scope="row">Adam Clark</th>
<td>$79</td>
<td>
<span class="badge badge-cancelled">
<span>
</span>Cancelled</span>
</td>
</tr>
</tbody>
</table>
</div>Bordered table
| Customer | Amount | Status |
|---|---|---|
| Alex Morgan | $129 | Paid |
| Sara Wilson | $249 | Paid |
| Omar Hassan | $89 | Pending |
| Lina Davis | $149 | Active |
| Adam Clark | $79 | Cancelled |
View HTML example
<div class="library-table-scroll">
<table class="sample-table table-bordered">
<caption class="sr-only">Bordered table</caption>
<thead>
<tr>
<th scope="col">Customer</th>
<th scope="col">Amount</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Alex Morgan</th>
<td>$129</td>
<td>
<span class="badge badge-paid">
<span>
</span>Paid</span>
</td>
</tr>
<tr>
<th scope="row">Sara Wilson</th>
<td>$249</td>
<td>
<span class="badge badge-paid">
<span>
</span>Paid</span>
</td>
</tr>
<tr>
<th scope="row">Omar Hassan</th>
<td>$89</td>
<td>
<span class="badge badge-pending">
<span>
</span>Pending</span>
</td>
</tr>
<tr>
<th scope="row">Lina Davis</th>
<td>$149</td>
<td>
<span class="badge badge-active">
<span>
</span>Active</span>
</td>
</tr>
<tr>
<th scope="row">Adam Clark</th>
<td>$79</td>
<td>
<span class="badge badge-cancelled">
<span>
</span>Cancelled</span>
</td>
</tr>
</tbody>
</table>
</div>Compact table
| Customer | Amount | Status |
|---|---|---|
| Alex Morgan | $129 | Paid |
| Sara Wilson | $249 | Paid |
| Omar Hassan | $89 | Pending |
| Lina Davis | $149 | Active |
| Adam Clark | $79 | Cancelled |
View HTML example
<div class="library-table-scroll">
<table class="sample-table table-compact">
<caption class="sr-only">Compact table</caption>
<thead>
<tr>
<th scope="col">Customer</th>
<th scope="col">Amount</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Alex Morgan</th>
<td>$129</td>
<td>
<span class="badge badge-paid">
<span>
</span>Paid</span>
</td>
</tr>
<tr>
<th scope="row">Sara Wilson</th>
<td>$249</td>
<td>
<span class="badge badge-paid">
<span>
</span>Paid</span>
</td>
</tr>
<tr>
<th scope="row">Omar Hassan</th>
<td>$89</td>
<td>
<span class="badge badge-pending">
<span>
</span>Pending</span>
</td>
</tr>
<tr>
<th scope="row">Lina Davis</th>
<td>$149</td>
<td>
<span class="badge badge-active">
<span>
</span>Active</span>
</td>
</tr>
<tr>
<th scope="row">Adam Clark</th>
<td>$79</td>
<td>
<span class="badge badge-cancelled">
<span>
</span>Cancelled</span>
</td>
</tr>
</tbody>
</table>
</div>Interactive data tables
Search, filter, sort, select rows, paginate, and export the complete filtered result.
Explore orders table