Basic Table
Using the most basic table markup, here’s how .table based tables look in Bootstrap.
<div class="table-responsive scrollbar">
<table class="table">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Email</th>
<th class="text-end" scope="col">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ricky Antony</td>
<td>ricky@example.com</td>
<td class="text-end">
<div>
<button class="btn p-0" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit"><span class="text-500 fas fa-edit"></span></button>
<button class="btn p-0 ms-2" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete"><span class="text-500 fas fa-trash-alt"></span></button>
</div>
</td>
</tr>
<tr>
<td>Emma Watson</td>
<td>emma@example.com</td>
<td class="text-end">
<div>
<button class="btn p-0" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit"><span class="text-500 fas fa-edit"></span></button>
<button class="btn p-0 ms-2" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete"><span class="text-500 fas fa-trash-alt"></span></button>
</div>
</td>
</tr>
<tr>
<td>Rowen Atkinson</td>
<td>rown@example.com</td>
<td class="text-end">
<div>
<button class="btn p-0" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit"><span class="text-500 fas fa-edit"></span></button>
<button class="btn p-0 ms-2" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete"><span class="text-500 fas fa-trash-alt"></span></button>
</div>
</td>
</tr>
<tr>
<td>Antony Hopkins</td>
<td>antony@example.com</td>
<td class="text-end">
<div>
<button class="btn p-0" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit"><span class="text-500 fas fa-edit"></span></button>
<button class="btn p-0 ms-2" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete"><span class="text-500 fas fa-trash-alt"></span></button>
</div>
</td>
</tr>
<tr>
<td>Jennifer Schramm</td>
<td>jennifer@example.com</td>
<td class="text-end">
<div>
<button class="btn p-0" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit"><span class="text-500 fas fa-edit"></span></button>
<button class="btn p-0 ms-2" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete"><span class="text-500 fas fa-trash-alt"></span></button>
</div>
</td>
</tr>
</tbody>
</table>
</div>Striped
Use .table-striped to add zebra-striping to any table row within the tbody.
<div class="table-responsive scrollbar">
<table class="table table-striped overflow-hidden">
<thead>
<tr class="btn-reveal-trigger">
<th scope="col">Name</th>
<th scope="col">Email</th>
<th class="text-end" scope="col">Actions</th>
</tr>
</thead>
<tbody>
<tr class="btn-reveal-trigger">
<td>Ricky Antony</td>
<td>ricky@example.com</td>
<td class="text-end">
<div class="dropdown font-sans-serif position-static">
<button class="btn btn-link text-600 btn-sm dropdown-toggle btn-reveal" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false"><span class="fas fa-ellipsis-h fs--1"></span></button>
<div class="dropdown-menu dropdown-menu-end border py-0">
<div class="bg-white py-2"><a class="dropdown-item" href="#!">Edit</a><a class="dropdown-item text-danger" href="#!">Delete</a></div>
</div>
</div>
</td>
</tr>
<tr class="btn-reveal-trigger">
<td>Emma Watson</td>
<td>emma@example.com</td>
<td class="text-end">
<div class="dropdown font-sans-serif position-static">
<button class="btn btn-link text-600 btn-sm dropdown-toggle btn-reveal" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false"><span class="fas fa-ellipsis-h fs--1"></span></button>
<div class="dropdown-menu dropdown-menu-end border py-0">
<div class="bg-white py-2"><a class="dropdown-item" href="#!">Edit</a><a class="dropdown-item text-danger" href="#!">Delete</a></div>
</div>
</div>
</td>
</tr>
<tr class="btn-reveal-trigger">
<td>Rowen Atkinson</td>
<td>rown@example.com</td>
<td class="text-end">
<div class="dropdown font-sans-serif position-static">
<button class="btn btn-link text-600 btn-sm dropdown-toggle btn-reveal" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false"><span class="fas fa-ellipsis-h fs--1"></span></button>
<div class="dropdown-menu dropdown-menu-end border py-0">
<div class="bg-white py-2"><a class="dropdown-item" href="#!">Edit</a><a class="dropdown-item text-danger" href="#!">Delete</a></div>
</div>
</div>
</td>
</tr>
<tr class="btn-reveal-trigger">
<td>Antony Hopkins</td>
<td>antony@example.com</td>
<td class="text-end">
<div class="dropdown font-sans-serif position-static">
<button class="btn btn-link text-600 btn-sm dropdown-toggle btn-reveal" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false"><span class="fas fa-ellipsis-h fs--1"></span></button>
<div class="dropdown-menu dropdown-menu-end border py-0">
<div class="bg-white py-2"><a class="dropdown-item" href="#!">Edit</a><a class="dropdown-item text-danger" href="#!">Delete</a></div>
</div>
</div>
</td>
</tr>
<tr class="btn-reveal-trigger">
<td>Jennifer Schramm</td>
<td>jennifer@example.com</td>
<td class="text-end">
<div class="dropdown font-sans-serif position-static">
<button class="btn btn-link text-600 btn-sm dropdown-toggle btn-reveal" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false"><span class="fas fa-ellipsis-h fs--1"></span></button>
<div class="dropdown-menu dropdown-menu-end border py-0">
<div class="bg-white py-2"><a class="dropdown-item" href="#!">Edit</a><a class="dropdown-item text-danger" href="#!">Delete</a></div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>Dark
Using the most basic table markup, here’s how .table-dark based tables look in Bootstrap.
| Name | |
|---|---|
| Ricky Antony | ricky@example.com |
| Emma Watson | emma@example.com |
| Rowen Atkinson | rown@example.com |
| Antony Hopkins | antony@example.com |
| Jennifer Schramm | jennifer@example.com |
<table class="table table-dark">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ricky Antony</td>
<td>ricky@example.com</td>
</tr>
<tr>
<td>Emma Watson</td>
<td>emma@example.com</td>
</tr>
<tr>
<td>Rowen Atkinson</td>
<td>rown@example.com</td>
</tr>
<tr>
<td>Antony Hopkins</td>
<td>antony@example.com</td>
</tr>
<tr>
<td>Jennifer Schramm</td>
<td>jennifer@example.com</td>
</tr>
</tbody>
</table>Hoverable Rows
| Name | joined | ||
|---|---|---|---|
Ricky Antony
|
ricky@example.com |
|
30/03/2018 |
Emma Watson
|
emma@example.com |
|
11/07/2017 |
|
RA
Rowen Atkinson
|
rown@example.com |
|
05/04/2016 |
Antony Hopkins
|
antony@example.com |
|
05/04/2018 |
Jennifer Schramm
|
jennifer@example.com |
|
17/03/2016 |
<div class="table-responsive scrollbar">
<table class="table table-hover">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Email</th>
<th scope="col"> </th>
<th scope="col">joined</th>
</tr>
</thead>
<tbody>
<tr class="hover-actions-trigger">
<td class="align-middle text-nowrap">
<div class="d-flex align-items-center">
<div class="avatar avatar-xl">
<img class="rounded-circle" src="../../assets/img/team/4.jpg" alt="" />
</div>
<div class="ms-2">Ricky Antony</div>
</div>
</td>
<td class="align-middle text-nowrap">ricky@example.com</td>
<td class="w-auto">
<div class="btn-group btn-group hover-actions end-0 me-4">
<button class="btn btn-light pe-2" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit"><span class="fas fa-edit"></span></button>
<button class="btn btn-light ps-2" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete"><span class="fas fa-trash-alt"></span></button>
</div>
</td>
<td class="align-middle text-nowrap">30/03/2018</td>
</tr>
<tr class="hover-actions-trigger">
<td class="align-middle text-nowrap">
<div class="d-flex align-items-center">
<div class="avatar avatar-xl">
<img class="rounded-circle" src="../../assets/img/team/13.jpg" alt="" />
</div>
<div class="ms-2">Emma Watson</div>
</div>
</td>
<td class="align-middle text-nowrap">emma@example.com</td>
<td class="w-auto">
<div class="btn-group btn-group hover-actions end-0 me-4">
<button class="btn btn-light pe-2" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit"><span class="fas fa-edit"></span></button>
<button class="btn btn-light ps-2" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete"><span class="fas fa-trash-alt"></span></button>
</div>
</td>
<td class="align-middle text-nowrap">11/07/2017</td>
</tr>
<tr class="hover-actions-trigger">
<td class="align-middle text-nowrap">
<div class="d-flex align-items-center">
<div class="avatar avatar-xl">
<div class="avatar-name rounded-circle"><span>RA</span></div>
</div>
<div class="ms-2">Rowen Atkinson</div>
</div>
</td>
<td class="align-middle text-nowrap">rown@example.com</td>
<td class="w-auto">
<div class="btn-group btn-group hover-actions end-0 me-4">
<button class="btn btn-light pe-2" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit"><span class="fas fa-edit"></span></button>
<button class="btn btn-light ps-2" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete"><span class="fas fa-trash-alt"></span></button>
</div>
</td>
<td class="align-middle text-nowrap">05/04/2016</td>
</tr>
<tr class="hover-actions-trigger">
<td class="align-middle text-nowrap">
<div class="d-flex align-items-center">
<div class="avatar avatar-xl">
<img class="rounded-circle" src="../../assets/img/team/2.jpg" alt="" />
</div>
<div class="ms-2">Antony Hopkins</div>
</div>
</td>
<td class="align-middle text-nowrap">antony@example.com</td>
<td class="w-auto">
<div class="btn-group btn-group hover-actions end-0 me-4">
<button class="btn btn-light pe-2" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit"><span class="fas fa-edit"></span></button>
<button class="btn btn-light ps-2" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete"><span class="fas fa-trash-alt"></span></button>
</div>
</td>
<td class="align-middle text-nowrap">05/04/2018</td>
</tr>
<tr class="hover-actions-trigger">
<td class="align-middle text-nowrap">
<div class="d-flex align-items-center">
<div class="avatar avatar-xl">
<img class="rounded-circle" src="../../assets/img/team/3.jpg" alt="" />
</div>
<div class="ms-2">Jennifer Schramm</div>
</div>
</td>
<td class="align-middle text-nowrap">jennifer@example.com</td>
<td class="w-auto">
<div class="btn-group btn-group hover-actions end-0 me-4">
<button class="btn btn-light pe-2" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit"><span class="fas fa-edit"></span></button>
<button class="btn btn-light ps-2" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete"><span class="fas fa-trash-alt"></span></button>
</div>
</td>
<td class="align-middle text-nowrap">17/03/2016</td>
</tr>
</tbody>
</table>
</div>Bordered tables
Add .table-bordered for borders on all sides of the table and cells.
| Name | |
|---|---|
| Ricky Antony | ricky@example.com |
| Emma Watson | emma@example.com |
| Rowen Atkinson | rown@example.com |
| Antony Hopkins | antony@example.com |
| Jennifer Schramm | jennifer@example.com |
<table class="table table-bordered">
<thead class="table-dark">
<tr>
<th scope="col">Name</th>
<th scope="col">Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ricky Antony</td>
<td>ricky@example.com</td>
</tr>
<tr>
<td>Emma Watson</td>
<td>emma@example.com</td>
</tr>
<tr>
<td>Rowen Atkinson</td>
<td>rown@example.com</td>
</tr>
<tr>
<td>Antony Hopkins</td>
<td>antony@example.com</td>
</tr>
<tr>
<td>Jennifer Schramm</td>
<td>jennifer@example.com</td>
</tr>
</tbody>
</table>Captions
| Name | |
|---|---|
| Ricky Antony | ricky@example.com |
| Emma Watson | emma@example.com |
| Rowen Atkinson | rown@example.com |
| Antony Hopkins | antony@example.com |
| Jennifer Schramm | jennifer@example.com |
<table class="table">
<caption>List of Users</caption>
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ricky Antony</td>
<td>ricky@example.com</td>
</tr>
<tr>
<td>Emma Watson</td>
<td>emma@example.com</td>
</tr>
<tr>
<td>Rowen Atkinson</td>
<td>rown@example.com</td>
</tr>
<tr>
<td>Antony Hopkins</td>
<td>antony@example.com</td>
</tr>
<tr>
<td>Jennifer Schramm</td>
<td>jennifer@example.com</td>
</tr>
</tbody>
</table>Small Tables
Add .table-sm to make any .table more compact by cutting all cell padding in half.
| Name | |
|---|---|
| Ricky Antony | ricky@example.com |
| Emma Watson | emma@example.com |
| Rowen Atkinson | rown@example.com |
| Antony Hopkins | antony@example.com |
| Jennifer Schramm | jennifer@example.com |
| Mizan Rifat | mizan@example.com |
| Tony Robbins | tony@example.com |
<table class="table table-sm">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ricky Antony</td>
<td>ricky@example.com</td>
</tr>
<tr>
<td>Emma Watson</td>
<td>emma@example.com</td>
</tr>
<tr>
<td>Rowen Atkinson</td>
<td>rown@example.com</td>
</tr>
<tr>
<td>Antony Hopkins</td>
<td>antony@example.com</td>
</tr>
<tr>
<td>Jennifer Schramm</td>
<td>jennifer@example.com</td>
</tr>
<tr>
<td>Mizan Rifat</td>
<td>mizan@example.com</td>
</tr>
<tr>
<td>Tony Robbins</td>
<td>tony@example.com</td>
</tr>
</tbody>
</table>Highlight Column
<div class="table-responsive scrollbar">
<table class="table table-bordered overflow-hidden">
<colgroup>
<col class="bg-soft-primary" />
<col />
<col />
</colgroup>
<thead>
<tr class="btn-reveal-trigger">
<th scope="col">Name</th>
<th scope="col">Email</th>
<th class="text-end" scope="col">Actions</th>
</tr>
</thead>
<tbody>
<tr class="btn-reveal-trigger">
<td>Ricky Antony</td>
<td>ricky@example.com</td>
<td class="text-end">
<div class="dropdown font-sans-serif position-static">
<button class="btn btn-link text-600 btn-sm dropdown-toggle btn-reveal" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false"><span class="fas fa-ellipsis-h fs--1"></span></button>
<div class="dropdown-menu dropdown-menu-end border py-0">
<div class="bg-white py-2"><a class="dropdown-item" href="#!">Edit</a><a class="dropdown-item text-danger" href="#!">Delete</a></div>
</div>
</div>
</td>
</tr>
<tr class="btn-reveal-trigger">
<td>Emma Watson</td>
<td>emma@example.com</td>
<td class="text-end">
<div class="dropdown font-sans-serif position-static">
<button class="btn btn-link text-600 btn-sm dropdown-toggle btn-reveal" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false"><span class="fas fa-ellipsis-h fs--1"></span></button>
<div class="dropdown-menu dropdown-menu-end border py-0">
<div class="bg-white py-2"><a class="dropdown-item" href="#!">Edit</a><a class="dropdown-item text-danger" href="#!">Delete</a></div>
</div>
</div>
</td>
</tr>
<tr class="btn-reveal-trigger">
<td>Rowen Atkinson</td>
<td>rown@example.com</td>
<td class="text-end">
<div class="dropdown font-sans-serif position-static">
<button class="btn btn-link text-600 btn-sm dropdown-toggle btn-reveal" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false"><span class="fas fa-ellipsis-h fs--1"></span></button>
<div class="dropdown-menu dropdown-menu-end border py-0">
<div class="bg-white py-2"><a class="dropdown-item" href="#!">Edit</a><a class="dropdown-item text-danger" href="#!">Delete</a></div>
</div>
</div>
</td>
</tr>
<tr class="btn-reveal-trigger">
<td>Antony Hopkins</td>
<td>antony@example.com</td>
<td class="text-end">
<div class="dropdown font-sans-serif position-static">
<button class="btn btn-link text-600 btn-sm dropdown-toggle btn-reveal" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false"><span class="fas fa-ellipsis-h fs--1"></span></button>
<div class="dropdown-menu dropdown-menu-end border py-0">
<div class="bg-white py-2"><a class="dropdown-item" href="#!">Edit</a><a class="dropdown-item text-danger" href="#!">Delete</a></div>
</div>
</div>
</td>
</tr>
<tr class="btn-reveal-trigger">
<td>Jennifer Schramm</td>
<td>jennifer@example.com</td>
<td class="text-end">
<div class="dropdown font-sans-serif position-static">
<button class="btn btn-link text-600 btn-sm dropdown-toggle btn-reveal" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false"><span class="fas fa-ellipsis-h fs--1"></span></button>
<div class="dropdown-menu dropdown-menu-end border py-0">
<div class="bg-white py-2"><a class="dropdown-item" href="#!">Edit</a><a class="dropdown-item text-danger" href="#!">Delete</a></div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>Active Table
Highlight a table row or cell by adding a .table-active class.
<div class="table-responsive scrollbar">
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Email</th>
<th class="text-end" scope="col">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ricky Antony</td>
<td>ricky@example.com</td>
<td class="text-end">
<div>
<button class="btn p-0" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit"><span class="text-500 fas fa-edit"></span></button>
<button class="btn p-0 ms-2" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete"><span class="text-500 fas fa-trash-alt"></span></button>
</div>
</td>
</tr>
<tr class="table-active">
<td>Emma Watson</td>
<td>emma@example.com</td>
<td class="text-end">
<div>
<button class="btn p-0" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit"><span class="text-500 fas fa-edit"></span></button>
<button class="btn p-0 ms-2" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete"><span class="text-500 fas fa-trash-alt"></span></button>
</div>
</td>
</tr>
<tr>
<td>Rowen Atkinson</td>
<td>rown@example.com</td>
<td class="text-end">
<div>
<button class="btn p-0" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit"><span class="text-500 fas fa-edit"></span></button>
<button class="btn p-0 ms-2" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete"><span class="text-500 fas fa-trash-alt"></span></button>
</div>
</td>
</tr>
<tr>
<td>Antony Hopkins</td>
<td class="table-active">antony@example.com</td>
<td class="text-end">
<div>
<button class="btn p-0" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit"><span class="text-500 fas fa-edit"></span></button>
<button class="btn p-0 ms-2" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete"><span class="text-500 fas fa-trash-alt"></span></button>
</div>
</td>
</tr>
<tr>
<td>Jennifer Schramm</td>
<td>jennifer@example.com</td>
<td class="text-end">
<div>
<button class="btn p-0" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit"><span class="text-500 fas fa-edit"></span></button>
<button class="btn p-0 ms-2" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete"><span class="text-500 fas fa-trash-alt"></span></button>
</div>
</td>
</tr>
</tbody>
</table>
</div>Variants
Use contextual classes to color tables, table rows or individual cells.
| Name | |
|---|---|
| Ricky Antony | ricky@example.com |
| Emma Watson | emma@example.com |
| Rowen Atkinson | rown@example.com |
| Antony Hopkins | antony@example.com |
| Jennifer Schramm | jennifer@example.com |
<table class="table">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Email</th>
</tr>
</thead>
<tbody>
<tr class="table-primary">
<td>Ricky Antony</td>
<td>ricky@example.com</td>
</tr>
<tr class="table-secondary">
<td>Emma Watson</td>
<td>emma@example.com</td>
</tr>
<tr class="table-success">
<td>Rowen Atkinson</td>
<td>rown@example.com</td>
</tr>
<tr class="table-danger">
<td>Antony Hopkins</td>
<td>antony@example.com</td>
</tr>
<tr class="table-warning">
<td>Jennifer Schramm</td>
<td>jennifer@example.com</td>
</tr>
</tbody>
</table>Responsive Table
Use .table-responsive for horizontally scrolling tables.And use .table-responsive{-sm|-md|-lg|-xl|-xxl} as needed to create responsive tables up to a particular breakpoint
| Name | Phone | Address | Status | Amount | |
|---|---|---|---|---|---|
|
Ricky Antony
|
ricky@example.com | (201) 200-1851 | 2392 Main Avenue, Penasauka | Completed | $99 |
|
Emma Watson
|
emma@example.com | (212) 228-8403 | 2289 5th Avenue, New York | Completed | $199 |
|
RA
Rowen Atkinson
|
rown@example.com | (201) 200-1851 | 112 Bostwick Avenue, Jersey City | Processing | $755 |
|
Antony Hopkins
|
antony@example.com | (901) 324-3127 | 3448 Ile De France St #242 | On Hold | $50 |
|
Jennifer Schramm
|
jennifer@example.com | (828) 382-9631 | 659 Hannah Street, Charlotte | Pending | $150 |
<div class="table-responsive scrollbar">
<table class="table table-hover table-striped overflow-hidden">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Email</th>
<th scope="col">Phone</th>
<th scope="col">Address</th>
<th scope="col">Status</th>
<th class="text-end" scope="col">Amount</th>
</tr>
</thead>
<tbody>
<tr class="align-middle">
<td class="text-nowrap">
<div class="d-flex align-items-center">
<div class="avatar avatar-xl">
<img class="rounded-circle" src="../../assets/img/team/4.jpg" alt="" />
</div>
<div class="ms-2">Ricky Antony</div>
</div>
</td>
<td class="text-nowrap">ricky@example.com</td>
<td class="text-nowrap">(201) 200-1851</td>
<td class="text-nowrap">2392 Main Avenue, Penasauka</td>
<td><span class="badge badge rounded-pill d-block p-2 badge-soft-success">Completed<span class="ms-1 fas fa-check" data-fa-transform="shrink-2"></span></span>
</td>
<td class="text-end">$99</td>
</tr>
<tr class="align-middle">
<td class="text-nowrap">
<div class="d-flex align-items-center">
<div class="avatar avatar-xl">
<img class="rounded-circle" src="../../assets/img/team/13.jpg" alt="" />
</div>
<div class="ms-2">Emma Watson</div>
</div>
</td>
<td class="text-nowrap">emma@example.com</td>
<td class="text-nowrap">(212) 228-8403</td>
<td class="text-nowrap">2289 5th Avenue, New York</td>
<td><span class="badge badge rounded-pill d-block p-2 badge-soft-success">Completed<span class="ms-1 fas fa-check" data-fa-transform="shrink-2"></span></span>
</td>
<td class="text-end">$199</td>
</tr>
<tr class="align-middle">
<td class="text-nowrap">
<div class="d-flex align-items-center">
<div class="avatar avatar-xl">
<div class="avatar-name rounded-circle"><span>RA</span></div>
</div>
<div class="ms-2">Rowen Atkinson</div>
</div>
</td>
<td class="text-nowrap">rown@example.com</td>
<td class="text-nowrap">(201) 200-1851</td>
<td class="text-nowrap">112 Bostwick Avenue, Jersey City</td>
<td><span class="badge badge rounded-pill d-block p-2 badge-soft-primary">Processing<span class="ms-1 fas fa-redo" data-fa-transform="shrink-2"></span></span>
</td>
<td class="text-end">$755</td>
</tr>
<tr class="align-middle">
<td class="text-nowrap">
<div class="d-flex align-items-center">
<div class="avatar avatar-xl">
<img class="rounded-circle" src="../../assets/img/team/2.jpg" alt="" />
</div>
<div class="ms-2">Antony Hopkins</div>
</div>
</td>
<td class="text-nowrap">antony@example.com</td>
<td class="text-nowrap">(901) 324-3127</td>
<td class="text-nowrap">3448 Ile De France St #242</td>
<td><span class="badge badge rounded-pill d-block p-2 badge-soft-secondary">On Hold<span class="ms-1 fas fa-ban" data-fa-transform="shrink-2"></span></span>
</td>
<td class="text-end">$50</td>
</tr>
<tr class="align-middle">
<td class="text-nowrap">
<div class="d-flex align-items-center">
<div class="avatar avatar-xl">
<img class="rounded-circle" src="../../assets/img/team/3.jpg" alt="" />
</div>
<div class="ms-2">Jennifer Schramm</div>
</div>
</td>
<td class="text-nowrap">jennifer@example.com</td>
<td class="text-nowrap">(828) 382-9631</td>
<td class="text-nowrap">659 Hannah Street, Charlotte</td>
<td><span class="badge badge rounded-pill d-block p-2 badge-soft-warning">Pending<span class="ms-1 fas fa-stream" data-fa-transform="shrink-2"></span></span>
</td>
<td class="text-end">$150</td>
</tr>
</tbody>
</table>
</div>
