Basic Tables
Documentation and examples for opt-in styling of tables with Bootstrap.
Read the official
Bootstrap Documentation for a full list of instructions
and other options.
Basic Table
Due to the widespread use of tables across third-party widgets like badge and avatars, we’ve designed our
tables to be opt-in. Just add the base class .table to any <table>, then
extend with custom styles or our various included modifier classes.
Use table-border-bottom-0 class with <tbody> or <tfoot> to remove border bottom from last <tr>.
| Project | Client | Users | Status | Actions |
|---|---|---|---|---|
| Tours Project | Albert Cook |
|
Active |
|
| Sports Project | Barry Hunter |
|
Completed |
|
| Greenhouse Project | Trevor Baker |
|
Scheduled |
|
| Bank Project | Jerry Milton |
|
Pending |
|
<div class="table-responsive text-nowrap">
<table class="table">
<thead>
<tr>
<th>Project</th>
<th>Client</th>
<th>Users</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody class="table-border-bottom-0">
<tr>
<td><i class="ri-suitcase-2-line ri-20px text-danger me-4"></i><span class="fw-medium">Tours Project</span></td>
<td>Albert Cook</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up"
title="Lilian Fuller">
<img src="../../assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="../../assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="../../assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge rounded-pill bg-label-primary me-1">Active</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="ri-more-2-line"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="ri-pencil-line me-1"></i> Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="ri-delete-bin-7-line me-1"></i> Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><i class="ri-basketball-fill ri-20px text-info me-4"></i><span class="fw-medium">Sports Project</span></td>
<td>Barry Hunter</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="../../assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="../../assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="../../assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge rounded-pill bg-label-success me-1">Completed</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="ri-more-2-line"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="ri-pencil-line me-2"></i> Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="ri-delete-bin-7-line me-2"></i> Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><i class="ri-leaf-fill ri-20px text-success me-4"></i><span class="fw-medium">Greenhouse Project</span></td>
<td>Trevor Baker</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="../../assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="../../assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="../../assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge rounded-pill bg-label-info me-1">Scheduled</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="ri-more-2-line"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="ri-pencil-line me-2"></i> Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="ri-delete-bin-7-line me-2"></i> Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><i class="ri-bank-fill ri-20px text-primary me-4"></i><span class="fw-medium">Bank Project</span></td>
<td>Jerry Milton</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="../../assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="../../assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="../../assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge rounded-pill bg-label-warning me-1">Pending</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="ri-more-2-line"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="ri-pencil-line me-2"></i> Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="ri-delete-bin-7-line me-2"></i> Delete</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>Dark Table
You can also invert the colors—with light text on dark backgrounds—with .table-dark.
| Project | Client | Users | Status | Actions |
|---|---|---|---|---|
| Tours Project | Albert Cook |
|
Active |
|
| Sports Project | Barry Hunter |
|
Completed |
|
| Greenhouse Project | Trevor Baker |
|
Scheduled |
|
| Bank Project | Jerry Milton |
|
Pending |
|
<div class="table-responsive text-nowrap">
<table class="table table-dark">
<thead>
<tr>
<th>Project</th>
<th>Client</th>
<th>Users</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td><i class="ri-suitcase-2-line ri-20px text-danger me-4"></i><span class="fw-medium">Tours Project</span>
</td>
<td>Albert Cook</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="../../assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="../../assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="../../assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge rounded-pill bg-label-primary me-1">Active</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i
class="ri-more-2-line"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="ri-pencil-line me-1"></i> Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="ri-delete-bin-7-line me-1"></i>
Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><i class="ri-basketball-fill ri-20px text-info me-4"></i><span class="fw-medium">Sports Project</span></td>
<td>Barry Hunter</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="../../assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="../../assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="../../assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge rounded-pill bg-label-success me-1">Completed</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i
class="ri-more-2-line"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="ri-pencil-line me-1"></i> Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="ri-delete-bin-7-line me-1"></i>
Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><i class="ri-leaf-fill ri-20px text-success me-4"></i><span class="fw-medium">Greenhouse
Project</span>
</td>
<td>Trevor Baker</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="../../assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="../../assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="../../assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge rounded-pill bg-label-info me-1">Scheduled</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i
class="ri-more-2-line"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="ri-pencil-line me-1"></i> Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="ri-delete-bin-7-line me-1"></i>
Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><i class="ri-bank-fill ri-20px text-primary me-4"></i><span class="fw-medium">Bank Project</span></td>
<td>Jerry Milton</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="../../assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="../../assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="../../assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge rounded-pill bg-label-warning me-1">Pending</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i
class="ri-more-2-line"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="ri-pencil-line me-1"></i> Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="ri-delete-bin-7-line me-1"></i>
Delete</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>Table Head Options
Similar to tables and dark tables, use the modifier classes .table-light or .table-dark to make <thead>s appear light or dark gray.
| Project | Client | Users | Status | Actions |
|---|---|---|---|---|
| Tours Project | Albert Cook |
|
Active |
|
| Sports Project | Barry Hunter |
|
Completed |
|
| Greenhouse Project | Trevor Baker |
|
Scheduled |
|
| Bank Project | Jerry Milton |
|
Pending |
|
<div class="table-responsive text-nowrap">
<table class="table">
<thead class="table-dark">
<tr>
<th>Project</th>
<th>Client</th>
<th>Users</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody class="table-border-bottom-0">
<tr>
<td><i class="ri-suitcase-2-line ri-20px text-danger me-4"></i><span class="fw-medium">Tours Project</span></td>
<td>Albert Cook</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="../../assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="../../assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="../../assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge rounded-pill bg-label-primary me-1">Active</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="ri-more-2-line"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="ri-pencil-line me-1"></i> Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="ri-delete-bin-7-line me-1"></i> Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><i class="ri-basketball-fill ri-20px text-info me-4"></i><span class="fw-medium">Sports Project</span></td>
<td>Barry Hunter</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="../../assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="../../assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="../../assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge rounded-pill bg-label-success me-1">Completed</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="ri-more-2-line"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="ri-pencil-line me-1"></i> Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="ri-delete-bin-7-line me-1"></i> Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><i class="ri-leaf-fill ri-20px text-success me-4"></i><span class="fw-medium">Greenhouse Project</span></td>
<td>Trevor Baker</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="../../assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="../../assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="../../assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge rounded-pill bg-label-info me-1">Scheduled</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="ri-more-2-line"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="ri-pencil-line me-1"></i> Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="ri-delete-bin-7-line me-1"></i> Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><i class="ri-bank-fill ri-20px text-primary me-4"></i><span class="fw-medium">Bank Project</span></td>
<td>Jerry Milton</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="../../assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="../../assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="../../assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge rounded-pill bg-label-warning me-1">Pending</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="ri-more-2-line"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="ri-pencil-line me-1"></i> Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="ri-delete-bin-7-line me-1"></i> Delete</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>Table Header & Footer
You can use <thead> for header & <tfoot> for footer headings.
| Project | Client | Users | Status | Actions |
|---|---|---|---|---|
| Tours Project | Albert Cook |
|
Active |
|
| Sports Project | Barry Hunter |
|
Completed |
|
| Greenhouse Project | Trevor Baker |
|
Scheduled |
|
| Bank Project | Jerry Milton |
|
Pending |
|
| Project | Client | Users | Status | Actions |
<div class="table-responsive text-nowrap">
<table class="table">
<thead>
<tr>
<th>Project</th>
<th>Client</th>
<th>Users</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td><i class="ri-suitcase-2-line ri-20px text-danger me-4"></i><span class="fw-medium">Tours Project</span>
</td>
<td>Albert Cook</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="../../assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="../../assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="../../assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge rounded-pill bg-label-primary me-1">Active</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i
class="ri-more-2-line"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="ri-pencil-line me-1"></i> Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="ri-delete-bin-7-line me-1"></i>
Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><i class="ri-basketball-fill ri-20px text-info me-4"></i><span class="fw-medium">Sports Project</span></td>
<td>Barry Hunter</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="../../assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="../../assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="../../assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge rounded-pill bg-label-success me-1">Completed</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i
class="ri-more-2-line"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="ri-pencil-line me-1"></i> Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="ri-delete-bin-7-line me-1"></i>
Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><i class="ri-leaf-fill ri-20px text-success me-4"></i><span class="fw-medium">Greenhouse
Project</span></td>
<td>Trevor Baker</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="../../assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="../../assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="../../assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge rounded-pill bg-label-info me-1">Scheduled</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i
class="ri-more-2-line"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="ri-pencil-line me-1"></i> Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="ri-delete-bin-7-line me-1"></i>
Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><i class="ri-bank-fill ri-20px text-primary me-4"></i><span class="fw-medium">Bank Project</span></td>
<td>Jerry Milton</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="../../assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="../../assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="../../assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge rounded-pill bg-label-warning me-1">Pending</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i
class="ri-more-2-line"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="ri-pencil-line me-1"></i> Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="ri-delete-bin-7-line me-1"></i>
Delete</a>
</div>
</div>
</td>
</tr>
</tbody>
<tfoot class="table-border-bottom-0">
<tr>
<th class="rounded-start-bottom">Project</th>
<th>Client</th>
<th>Users</th>
<th>Status</th>
<th class="rounded-end-bottom">Actions</th>
</tr>
</tfoot>
</table>
</div>Table with Caption
A <caption> functions like a heading for a table. It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it.
| Project | Client | Users | Status | Actions |
|---|---|---|---|---|
| Tours Project | Albert Cook |
|
Active |
|
| Sports Project | Barry Hunter |
|
Completed |
|
| Greenhouse Project | Trevor Baker |
|
Scheduled |
|
| Bank Project | Jerry Milton |
|
Pending |
|
<div class="table-responsive text-nowrap">
<table class="table">
<caption class="ms-4">List of Projects</caption>
<thead>
<tr>
<th>Project</th>
<th>Client</th>
<th>Users</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td><i class="ri-suitcase-2-line ri-20px text-danger me-4"></i><span class="fw-medium">Tours Project</span>
</td>
<td>Albert Cook</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="../../assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="../../assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="../../assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge rounded-pill bg-label-primary me-1">Active</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i
class="ri-more-2-line"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="ri-pencil-line me-1"></i> Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="ri-delete-bin-7-line me-1"></i>
Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><i class="ri-basketball-fill ri-20px text-info me-4"></i><span class="fw-medium">Sports Project</span></td>
<td>Barry Hunter</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="../../assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="../../assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="../../assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge rounded-pill bg-label-success me-1">Completed</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i
class="ri-more-2-line"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="ri-pencil-line me-1"></i> Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="ri-delete-bin-7-line me-1"></i>
Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><i class="ri-leaf-fill ri-20px text-success me-4"></i><span class="fw-medium">Greenhouse
Project</span></td>
<td>Trevor Baker</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="../../assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="../../assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="../../assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge rounded-pill bg-label-info me-1">Scheduled</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i
class="ri-more-2-line"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="ri-pencil-line me-1"></i> Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="ri-delete-bin-7-line me-1"></i>
Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><i class="ri-bank-fill ri-20px text-primary me-4"></i><span class="fw-medium">Bank Project</span></td>
<td>Jerry Milton</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="../../assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="../../assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="../../assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge rounded-pill bg-label-warning me-1">Pending</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i
class="ri-more-2-line"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="ri-pencil-line me-1"></i> Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="ri-delete-bin-7-line me-1"></i>
Delete</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>Striped Rows
Use .table-striped with .table to add zebra-striping to any table row within the <tbody>.
| Project | Client | Users | Status | Actions |
|---|---|---|---|---|
| Tours Project | Albert Cook |
|
Active |
|
| Sports Project | Barry Hunter |
|
Completed |
|
| Greenhouse Project | Trevor Baker |
|
Scheduled |
|
| Bank Project | Jerry Milton |
|
Pending |
|
<div class="table-responsive text-nowrap">
<table class="table table-striped">
<thead>
<tr>
<th>Project</th>
<th>Client</th>
<th>Users</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody class="table-border-bottom-0">
<tr>
<td><i class="ri-suitcase-2-line ri-20px text-danger me-4"></i><span class="fw-medium">Tours Project</span>
</td>
<td>Albert Cook</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="../../assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="../../assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="../../assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge rounded-pill bg-label-primary me-1">Active</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i
class="ri-more-2-line"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="ri-pencil-line me-1"></i> Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="ri-delete-bin-7-line me-1"></i>
Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><i class="ri-basketball-fill ri-20px text-info me-4"></i><span class="fw-medium">Sports Project</span></td>
<td>Barry Hunter</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="../../assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="../../assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="../../assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge rounded-pill bg-label-success me-1">Completed</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i
class="ri-more-2-line"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="ri-pencil-line me-1"></i> Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="ri-delete-bin-7-line me-1"></i>
Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><i class="ri-leaf-fill ri-20px text-success me-4"></i><span class="fw-medium">Greenhouse
Project</span></td>
<td>Trevor Baker</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="../../assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="../../assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="../../assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge rounded-pill bg-label-info me-1">Scheduled</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i
class="ri-more-2-line"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="ri-pencil-line me-1"></i> Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="ri-delete-bin-7-line me-1"></i>
Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><i class="ri-bank-fill ri-20px text-primary me-4"></i><span class="fw-medium">Bank Project</span></td>
<td>Jerry Milton</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="../../assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="../../assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="../../assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge rounded-pill bg-label-warning me-1">Pending</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i
class="ri-more-2-line"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="ri-pencil-line me-1"></i> Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="ri-delete-bin-7-line me-1"></i>
Delete</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>Bordered Table
Add .table-bordered with .table for borders on all sides of the table and cells.
| Project | Client | Users | Status | Actions |
|---|---|---|---|---|
| Tours Project | Albert Cook |
|
Active |
|
| Sports Project | Barry Hunter |
|
Completed |
|
| Greenhouse Project | Trevor Baker |
|
Scheduled |
|
| Bank Project | Jerry Milton |
|
Pending |
|
<div class="table-responsive text-nowrap">
<table class="table table-bordered">
<thead>
<tr>
<th>Project</th>
<th>Client</th>
<th>Users</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<i class="ri-suitcase-2-line ri-20px text-danger me-4"></i><span class="fw-medium">Tours Project</span>
</td>
<td>Albert Cook</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="../../assets/img/avatars/5.png" alt="Avatar" class="rounded-circle" />
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="../../assets/img/avatars/6.png" alt="Avatar" class="rounded-circle" />
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="../../assets/img/avatars/7.png" alt="Avatar" class="rounded-circle" />
</li>
</ul>
</td>
<td><span class="badge rounded-pill bg-label-primary me-1">Active</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown">
<i class="ri-more-2-line"></i>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="ri-pencil-line me-1"></i> Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="ri-delete-bin-7-line me-1"></i>
Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td>
<i class="ri-basketball-fill ri-20px text-info me-4"></i><span class="fw-medium">Sports Project</span>
</td>
<td>Barry Hunter</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="../../assets/img/avatars/5.png" alt="Avatar" class="rounded-circle" />
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="../../assets/img/avatars/6.png" alt="Avatar" class="rounded-circle" />
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="../../assets/img/avatars/7.png" alt="Avatar" class="rounded-circle" />
</li>
</ul>
</td>
<td><span class="badge rounded-pill bg-label-success me-1">Completed</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown">
<i class="ri-more-2-line"></i>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="ri-pencil-line me-1"></i> Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="ri-delete-bin-7-line me-1"></i>
Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td>
<i class="ri-leaf-fill ri-20px text-success me-4"></i><span class="fw-medium">Greenhouse Project</span>
</td>
<td>Trevor Baker</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="../../assets/img/avatars/5.png" alt="Avatar" class="rounded-circle" />
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="../../assets/img/avatars/6.png" alt="Avatar" class="rounded-circle" />
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="../../assets/img/avatars/7.png" alt="Avatar" class="rounded-circle" />
</li>
</ul>
</td>
<td><span class="badge rounded-pill bg-label-info me-1">Scheduled</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown">
<i class="ri-more-2-line"></i>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="ri-pencil-line me-1"></i> Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="ri-delete-bin-7-line me-1"></i>
Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td>
<i class="ri-bank-fill ri-20px text-primary me-4"></i><span class="fw-medium">Bank Project</span>
</td>
<td>Jerry Milton</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="../../assets/img/avatars/5.png" alt="Avatar" class="rounded-circle" />
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="../../assets/img/avatars/6.png" alt="Avatar" class="rounded-circle" />
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="../../assets/img/avatars/7.png" alt="Avatar" class="rounded-circle" />
</li>
</ul>
</td>
<td><span class="badge rounded-pill bg-label-warning me-1">Pending</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown">
<i class="ri-more-2-line"></i>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="ri-pencil-line me-1"></i> Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="ri-delete-bin-7-line me-1"></i>
Delete</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>To use color border, use below border utilities classes with .table-bordered class
| Class | Value |
|---|---|
class="border-{value}"
|
primary | secondary | success | danger | warning | info | dark |
Borderless Table
Add .table-borderless with .table for a table without borders.
| Project | Client | Users | Status | Actions |
|---|---|---|---|---|
| Tours Project | Albert Cook |
|
Active |
|
| Sports Project | Barry Hunter |
|
Completed |
|
| Greenhouse Project | Trevor Baker |
|
Scheduled |
|
| Bank Project | Jerry Milton |
|
Pending |
|
<div class="table-responsive text-nowrap">
<table class="table table-borderless">
<thead>
<tr>
<th>Project</th>
<th>Client</th>
<th>Users</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td><i class="ri-suitcase-2-line ri-20px text-danger me-4"></i><span class="fw-medium">Tours Project</span>
</td>
<td>Albert Cook</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="../../assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="../../assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="../../assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge rounded-pill bg-label-primary me-1">Active</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i
class="ri-more-2-line"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="ri-pencil-line me-1"></i> Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="ri-delete-bin-7-line me-1"></i>
Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><i class="ri-basketball-fill ri-20px text-info me-4"></i><span class="fw-medium">Sports Project</span></td>
<td>Barry Hunter</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="../../assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="../../assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="../../assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge rounded-pill bg-label-success me-1">Completed</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i
class="ri-more-2-line"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="ri-pencil-line me-1"></i> Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="ri-delete-bin-7-line me-1"></i>
Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><i class="ri-leaf-fill ri-20px text-success me-4"></i><span class="fw-medium">Greenhouse
Project</span></td>
<td>Trevor Baker</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="../../assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="../../assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="../../assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge rounded-pill bg-label-info me-1">Scheduled</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i
class="ri-more-2-line"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="ri-pencil-line me-1"></i> Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="ri-delete-bin-7-line me-1"></i>
Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><i class="ri-bank-fill ri-20px text-primary me-4"></i><span class="fw-medium">Bank Project</span></td>
<td>Jerry Milton</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="../../assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="../../assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="../../assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge rounded-pill bg-label-warning me-1">Pending</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i
class="ri-more-2-line"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="ri-pencil-line me-1"></i> Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="ri-delete-bin-7-line me-1"></i>
Delete</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>Hoverable Rows
Add .table-hover with .table to enable a hover state on table rows within a <tbody>.
| Project | Client | Users | Status | Actions |
|---|---|---|---|---|
| Tours Project | Albert Cook |
|
Active |
|
| Sports Project | Barry Hunter |
|
Completed |
|
| Greenhouse Project | Trevor Baker |
|
Scheduled |
|
| Bank Project | Jerry Milton |
|
Pending |
|
<div class="table-responsive text-nowrap">
<table class="table table-hover">
<thead>
<tr>
<th>Project</th>
<th>Client</th>
<th>Users</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody class="table-border-bottom-0">
<tr>
<td><i class="ri-suitcase-2-line ri-20px text-danger me-4"></i><span class="fw-medium">Tours Project</span>
</td>
<td>Albert Cook</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="../../assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="../../assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="../../assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge rounded-pill bg-label-primary me-1">Active</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i
class="ri-more-2-line"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="ri-pencil-line me-1"></i> Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="ri-delete-bin-7-line me-1"></i>
Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><i class="ri-basketball-fill ri-20px text-info me-4"></i><span class="fw-medium">Sports Project</span></td>
<td>Barry Hunter</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="../../assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="../../assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="../../assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge rounded-pill bg-label-success me-1">Completed</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i
class="ri-more-2-line"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="ri-pencil-line me-1"></i> Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="ri-delete-bin-7-line me-1"></i>
Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><i class="ri-leaf-fill ri-20px text-success me-4"></i><span class="fw-medium">Greenhouse
Project</span></td>
<td>Trevor Baker</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="../../assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="../../assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="../../assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge rounded-pill bg-label-info me-1">Scheduled</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i
class="ri-more-2-line"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="ri-pencil-line me-1"></i> Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="ri-delete-bin-7-line me-1"></i>
Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><i class="ri-bank-fill ri-20px text-primary me-4"></i><span class="fw-medium">Bank Project</span></td>
<td>Jerry Milton</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="../../assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="../../assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="../../assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge rounded-pill bg-label-warning me-1">Pending</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i
class="ri-more-2-line"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="ri-pencil-line me-1"></i> Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="ri-delete-bin-7-line me-1"></i>
Delete</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>Small Table
Add .table-sm with .table to make tables more compact by cutting cell padding in half.
| Project | Client | Users | Status | Actions |
|---|---|---|---|---|
| Tours Project | Albert Cook |
|
Active |
|
| Sports Project | Barry Hunter |
|
Completed |
|
| Greenhouse Project | Trevor Baker |
|
Scheduled |
|
| Bank Project | Jerry Milton |
|
Pending |
|
<div class="table-responsive text-nowrap">
<table class="table table-sm">
<thead>
<tr>
<th>Project</th>
<th>Client</th>
<th>Users</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody class="table-border-bottom-0">
<tr>
<td><i class="ri-suitcase-2-line ri-20px text-danger me-4"></i><span class="fw-medium">Tours Project</span>
</td>
<td>Albert Cook</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="../../assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="../../assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="../../assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge rounded-pill bg-label-primary me-1">Active</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i
class="ri-more-2-line"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="ri-pencil-line me-1"></i> Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="ri-delete-bin-7-line me-1"></i>
Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><i class="ri-basketball-fill ri-20px text-info me-4"></i><span class="fw-medium">Sports Project</span></td>
<td>Barry Hunter</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="../../assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="../../assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="../../assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge rounded-pill bg-label-success me-1">Completed</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i
class="ri-more-2-line"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="ri-pencil-line me-1"></i> Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="ri-delete-bin-7-line me-1"></i>
Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><i class="ri-leaf-fill ri-20px text-success me-4"></i><span class="fw-medium">Greenhouse
Project</span></td>
<td>Trevor Baker</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="../../assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="../../assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="../../assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge rounded-pill bg-label-info me-1">Scheduled</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i
class="ri-more-2-line"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="ri-pencil-line me-1"></i> Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="ri-delete-bin-7-line me-1"></i>
Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><i class="ri-bank-fill ri-20px text-primary me-4"></i><span class="fw-medium">Bank Project</span></td>
<td>Jerry Milton</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="../../assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="../../assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="../../assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge rounded-pill bg-label-warning me-1">Pending</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i
class="ri-more-2-line"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="ri-pencil-line me-1"></i> Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="ri-delete-bin-7-line me-1"></i>
Delete</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>Contextual classes
Use contextual classes to color table rows or individual cells.
| Project | Client | Users | Status | Actions |
|---|---|---|---|---|
| UI/UX Project | Ronnie Shane |
|
Active |
|
| Sports Project | Barry Hunter |
|
Completed |
|
| Tours Project | Albert Cook |
|
Active |
|
| Greenhouse Project | Trevor Baker |
|
Scheduled |
|
| Bank Project | Jerry Milton |
|
Pending |
|
| UI/UX Project | Sarah Banks |
|
Active |
|
| Custom Security | Ted Richer |
|
Scheduled |
|
| Latest Bootstrap | Perry Parker |
|
Pending |
|
| Angular UI | Ana Bell |
|
Completed |
|
| Bootstrap UI | Jerry Milton |
|
Completed |
|
<div class="table-responsive text-nowrap">
<table class="table">
<thead>
<tr>
<th>Project</th>
<th>Client</th>
<th>Users</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody class="table-border-bottom-0">
<tr class="table-default">
<td>
<i class="ri-palette-line ri-20px text-warning me-4"></i
><span class="fw-medium">UI/UX Project</span>
</td>
<td>Ronnie Shane</td>
<td>
<ul
class="list-unstyled users-list m-0 avatar-group d-flex align-items-center"
>
<li
data-bs-toggle="tooltip"
data-popup="tooltip-custom"
data-bs-placement="top"
class="avatar avatar-xs pull-up"
title="Lilian Fuller"
>
<img
src="../../assets/img/avatars/5.png"
alt="Avatar"
class="rounded-circle"
/>
</li>
<li
data-bs-toggle="tooltip"
data-popup="tooltip-custom"
data-bs-placement="top"
class="avatar avatar-xs pull-up"
title="Sophia Wilkerson"
>
<img
src="../../assets/img/avatars/6.png"
alt="Avatar"
class="rounded-circle"
/>
</li>
<li
data-bs-toggle="tooltip"
data-popup="tooltip-custom"
data-bs-placement="top"
class="avatar avatar-xs pull-up"
title="Christina Parker"
>
<img
src="../../assets/img/avatars/7.png"
alt="Avatar"
class="rounded-circle"
/>
</li>
</ul>
</td>
<td><span class="badge rounded-pill bg-label-primary me-1">Active</span></td>
<td>
<div class="dropdown">
<button
type="button"
class="btn p-0 dropdown-toggle hide-arrow"
data-bs-toggle="dropdown"
>
<i class="ri-more-2-line"></i>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"
><i class="ri-pencil-line me-1"></i> Edit</a
>
<a class="dropdown-item" href="javascript:void(0);"
><i class="ri-delete-bin-7-line me-1"></i> Delete</a
>
</div>
</div>
</td>
</tr>
<tr class="table-active">
<td>
<i class="ri-basketball-fill ri-20px text-info me-4"></i
><span class="fw-medium">Sports Project</span>
</td>
<td>Barry Hunter</td>
<td>
<ul
class="list-unstyled users-list m-0 avatar-group d-flex align-items-center"
>
<li
data-bs-toggle="tooltip"
data-popup="tooltip-custom"
data-bs-placement="top"
class="avatar avatar-xs pull-up"
title="Lilian Fuller"
>
<img
src="../../assets/img/avatars/5.png"
alt="Avatar"
class="rounded-circle"
/>
</li>
<li
data-bs-toggle="tooltip"
data-popup="tooltip-custom"
data-bs-placement="top"
class="avatar avatar-xs pull-up"
title="Sophia Wilkerson"
>
<img
src="../../assets/img/avatars/6.png"
alt="Avatar"
class="rounded-circle"
/>
</li>
<li
data-bs-toggle="tooltip"
data-popup="tooltip-custom"
data-bs-placement="top"
class="avatar avatar-xs pull-up"
title="Christina Parker"
>
<img
src="../../assets/img/avatars/7.png"
alt="Avatar"
class="rounded-circle"
/>
</li>
</ul>
</td>
<td><span class="badge rounded-pill bg-label-success me-1">Completed</span></td>
<td>
<div class="dropdown">
<button
type="button"
class="btn p-0 dropdown-toggle hide-arrow"
data-bs-toggle="dropdown"
>
<i class="ri-more-2-line"></i>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"
><i class="ri-pencil-line me-1"></i> Edit</a
>
<a class="dropdown-item" href="javascript:void(0);"
><i class="ri-delete-bin-7-line me-1"></i> Delete</a
>
</div>
</div>
</td>
</tr>
<tr class="table-primary">
<td>
<i class="ri-suitcase-2-line ri-20px text-danger me-4"></i
><span class="fw-medium">Tours Project</span>
</td>
<td>Albert Cook</td>
<td>
<ul
class="list-unstyled users-list m-0 avatar-group d-flex align-items-center"
>
<li
data-bs-toggle="tooltip"
data-popup="tooltip-custom"
data-bs-placement="top"
class="avatar avatar-xs pull-up"
title="Lilian Fuller"
>
<img
src="../../assets/img/avatars/5.png"
alt="Avatar"
class="rounded-circle"
/>
</li>
<li
data-bs-toggle="tooltip"
data-popup="tooltip-custom"
data-bs-placement="top"
class="avatar avatar-xs pull-up"
title="Sophia Wilkerson"
>
<img
src="../../assets/img/avatars/6.png"
alt="Avatar"
class="rounded-circle"
/>
</li>
<li
data-bs-toggle="tooltip"
data-popup="tooltip-custom"
data-bs-placement="top"
class="avatar avatar-xs pull-up"
title="Christina Parker"
>
<img
src="../../assets/img/avatars/7.png"
alt="Avatar"
class="rounded-circle"
/>
</li>
</ul>
</td>
<td><span class="badge rounded-pill bg-label-primary me-1">Active</span></td>
<td>
<div class="dropdown">
<button
type="button"
class="btn p-0 dropdown-toggle hide-arrow"
data-bs-toggle="dropdown"
>
<i class="ri-more-2-line"></i>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"
><i class="ri-pencil-line me-1"></i> Edit</a
>
<a class="dropdown-item" href="javascript:void(0);"
><i class="ri-delete-bin-7-line me-1"></i> Delete</a
>
</div>
</div>
</td>
</tr>
<tr class="table-secondary">
<td>
<i class="ri-leaf-fill ri-20px text-success me-4"></i
><span class="fw-medium">Greenhouse Project</span>
</td>
<td>Trevor Baker</td>
<td>
<ul
class="list-unstyled users-list m-0 avatar-group d-flex align-items-center"
>
<li
data-bs-toggle="tooltip"
data-popup="tooltip-custom"
data-bs-placement="top"
class="avatar avatar-xs pull-up"
title="Lilian Fuller"
>
<img
src="../../assets/img/avatars/5.png"
alt="Avatar"
class="rounded-circle"
/>
</li>
<li
data-bs-toggle="tooltip"
data-popup="tooltip-custom"
data-bs-placement="top"
class="avatar avatar-xs pull-up"
title="Sophia Wilkerson"
>
<img
src="../../assets/img/avatars/6.png"
alt="Avatar"
class="rounded-circle"
/>
</li>
<li
data-bs-toggle="tooltip"
data-popup="tooltip-custom"
data-bs-placement="top"
class="avatar avatar-xs pull-up"
title="Christina Parker"
>
<img
src="../../assets/img/avatars/7.png"
alt="Avatar"
class="rounded-circle"
/>
</li>
</ul>
</td>
<td><span class="badge rounded-pill bg-label-info me-1">Scheduled</span></td>
<td>
<div class="dropdown">
<button
type="button"
class="btn p-0 dropdown-toggle hide-arrow"
data-bs-toggle="dropdown"
>
<i class="ri-more-2-line"></i>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"
><i class="ri-pencil-line me-1"></i> Edit</a
>
<a class="dropdown-item" href="javascript:void(0);"
><i class="ri-delete-bin-7-line me-1"></i> Delete</a
>
</div>
</div>
</td>
</tr>
<tr class="table-success">
<td>
<i class="ri-bank-fill ri-20px text-primary me-4"></i
><span class="fw-medium">Bank Project</span>
</td>
<td>Jerry Milton</td>
<td>
<ul
class="list-unstyled users-list m-0 avatar-group d-flex align-items-center"
>
<li
data-bs-toggle="tooltip"
data-popup="tooltip-custom"
data-bs-placement="top"
class="avatar avatar-xs pull-up"
title="Lilian Fuller"
>
<img
src="../../assets/img/avatars/5.png"
alt="Avatar"
class="rounded-circle"
/>
</li>
<li
data-bs-toggle="tooltip"
data-popup="tooltip-custom"
data-bs-placement="top"
class="avatar avatar-xs pull-up"
title="Sophia Wilkerson"
>
<img
src="../../assets/img/avatars/6.png"
alt="Avatar"
class="rounded-circle"
/>
</li>
<li
data-bs-toggle="tooltip"
data-popup="tooltip-custom"
data-bs-placement="top"
class="avatar avatar-xs pull-up"
title="Christina Parker"
>
<img
src="../../assets/img/avatars/7.png"
alt="Avatar"
class="rounded-circle"
/>
</li>
</ul>
</td>
<td><span class="badge rounded-pill bg-label-warning me-1">Pending</span></td>
<td>
<div class="dropdown">
<button
type="button"
class="btn p-0 dropdown-toggle hide-arrow"
data-bs-toggle="dropdown"
>
<i class="ri-more-2-line"></i>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"
><i class="ri-pencil-line me-1"></i> Edit</a
>
<a class="dropdown-item" href="javascript:void(0);"
><i class="ri-delete-bin-7-line me-1"></i> Delete</a
>
</div>
</div>
</td>
</tr>
<tr class="table-danger">
<td>
<i class="ri-palette-line ri-20px text-danger me-4"></i
><span class="fw-medium">UI/UX Project</span>
</td>
<td>Sarah Banks</td>
<td>
<ul
class="list-unstyled users-list m-0 avatar-group d-flex align-items-center"
>
<li
data-bs-toggle="tooltip"
data-popup="tooltip-custom"
data-bs-placement="top"
class="avatar avatar-xs pull-up"
title="Lilian Fuller"
>
<img
src="../../assets/img/avatars/5.png"
alt="Avatar"
class="rounded-circle"
/>
</li>
<li
data-bs-toggle="tooltip"
data-popup="tooltip-custom"
data-bs-placement="top"
class="avatar avatar-xs pull-up"
title="Sophia Wilkerson"
>
<img
src="../../assets/img/avatars/6.png"
alt="Avatar"
class="rounded-circle"
/>
</li>
<li
data-bs-toggle="tooltip"
data-popup="tooltip-custom"
data-bs-placement="top"
class="avatar avatar-xs pull-up"
title="Christina Parker"
>
<img
src="../../assets/img/avatars/7.png"
alt="Avatar"
class="rounded-circle"
/>
</li>
</ul>
</td>
<td><span class="badge rounded-pill bg-label-primary me-1">Active</span></td>
<td>
<div class="dropdown">
<button
type="button"
class="btn p-0 dropdown-toggle hide-arrow"
data-bs-toggle="dropdown"
>
<i class="ri-more-2-line"></i>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"
><i class="ri-pencil-line me-1"></i> Edit</a
>
<a class="dropdown-item" href="javascript:void(0);"
><i class="ri-delete-bin-7-line me-1"></i> Delete</a
>
</div>
</div>
</td>
</tr>
<tr class="table-warning">
<td>
<i class="ri-shield-user-line ri-20px text-info me-4"></i
><span class="fw-medium">Custom Security</span>
</td>
<td>Ted Richer</td>
<td>
<ul
class="list-unstyled users-list m-0 avatar-group d-flex align-items-center"
>
<li
data-bs-toggle="tooltip"
data-popup="tooltip-custom"
data-bs-placement="top"
class="avatar avatar-xs pull-up"
title="Lilian Fuller"
>
<img
src="../../assets/img/avatars/5.png"
alt="Avatar"
class="rounded-circle"
/>
</li>
<li
data-bs-toggle="tooltip"
data-popup="tooltip-custom"
data-bs-placement="top"
class="avatar avatar-xs pull-up"
title="Sophia Wilkerson"
>
<img
src="../../assets/img/avatars/6.png"
alt="Avatar"
class="rounded-circle"
/>
</li>
<li
data-bs-toggle="tooltip"
data-popup="tooltip-custom"
data-bs-placement="top"
class="avatar avatar-xs pull-up"
title="Christina Parker"
>
<img
src="../../assets/img/avatars/7.png"
alt="Avatar"
class="rounded-circle"
/>
</li>
</ul>
</td>
<td><span class="badge rounded-pill bg-label-info me-1">Scheduled</span></td>
<td>
<div class="dropdown">
<button
type="button"
class="btn p-0 dropdown-toggle hide-arrow"
data-bs-toggle="dropdown"
>
<i class="ri-more-2-line"></i>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"
><i class="ri-pencil-line me-1"></i> Edit</a
>
<a class="dropdown-item" href="javascript:void(0);"
><i class="ri-delete-bin-7-line me-1"></i> Delete</a
>
</div>
</div>
</td>
</tr>
<tr class="table-info">
<td>
<i class="ri-lifebuoy-line ri-20px text-primary me-4"></i
><span class="fw-medium">Latest Bootstrap</span>
</td>
<td>Perry Parker</td>
<td>
<ul
class="list-unstyled users-list m-0 avatar-group d-flex align-items-center"
>
<li
data-bs-toggle="tooltip"
data-popup="tooltip-custom"
data-bs-placement="top"
class="avatar avatar-xs pull-up"
title="Lilian Fuller"
>
<img
src="../../assets/img/avatars/5.png"
alt="Avatar"
class="rounded-circle"
/>
</li>
<li
data-bs-toggle="tooltip"
data-popup="tooltip-custom"
data-bs-placement="top"
class="avatar avatar-xs pull-up"
title="Sophia Wilkerson"
>
<img
src="../../assets/img/avatars/6.png"
alt="Avatar"
class="rounded-circle"
/>
</li>
<li
data-bs-toggle="tooltip"
data-popup="tooltip-custom"
data-bs-placement="top"
class="avatar avatar-xs pull-up"
title="Christina Parker"
>
<img
src="../../assets/img/avatars/7.png"
alt="Avatar"
class="rounded-circle"
/>
</li>
</ul>
</td>
<td><span class="badge rounded-pill bg-label-warning me-1">Pending</span></td>
<td>
<div class="dropdown">
<button
type="button"
class="btn p-0 dropdown-toggle hide-arrow"
data-bs-toggle="dropdown"
>
<i class="ri-more-2-line"></i>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"
><i class="ri-pencil-line me-1"></i> Edit</a
>
<a class="dropdown-item" href="javascript:void(0);"
><i class="ri-delete-bin-7-line me-1"></i> Delete</a
>
</div>
</div>
</td>
</tr>
<tr class="table-light">
<td>
<i
class="ri-angularjs-line ri-20px text-danger me-4"
></i
><span class="fw-medium">Angular UI</span>
</td>
<td>Ana Bell</td>
<td>
<ul
class="list-unstyled users-list m-0 avatar-group d-flex align-items-center"
>
<li
data-bs-toggle="tooltip"
data-popup="tooltip-custom"
data-bs-placement="top"
class="avatar avatar-xs pull-up"
title="Lilian Fuller"
>
<img
src="../../assets/img/avatars/5.png"
alt="Avatar"
class="rounded-circle"
/>
</li>
<li
data-bs-toggle="tooltip"
data-popup="tooltip-custom"
data-bs-placement="top"
class="avatar avatar-xs pull-up"
title="Sophia Wilkerson"
>
<img
src="../../assets/img/avatars/6.png"
alt="Avatar"
class="rounded-circle"
/>
</li>
<li
data-bs-toggle="tooltip"
data-popup="tooltip-custom"
data-bs-placement="top"
class="avatar avatar-xs pull-up"
title="Christina Parker"
>
<img
src="../../assets/img/avatars/7.png"
alt="Avatar"
class="rounded-circle"
/>
</li>
</ul>
</td>
<td><span class="badge rounded-pill bg-label-success me-1">Completed</span></td>
<td>
<div class="dropdown">
<button
type="button"
class="btn p-0 dropdown-toggle hide-arrow"
data-bs-toggle="dropdown"
>
<i class="ri-more-2-line"></i>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"
><i class="ri-pencil-line me-1"></i> Edit</a
>
<a class="dropdown-item" href="javascript:void(0);"
><i class="ri-delete-bin-7-line me-1"></i> Delete</a
>
</div>
</div>
</td>
</tr>
<tr class="table-dark">
<td class="rounded-start-bottom">
<i class="ri-pulse-line ri-20px text-success me-4"></i
><span class="fw-medium">Bootstrap UI</span>
</td>
<td>Jerry Milton</td>
<td>
<ul
class="list-unstyled users-list m-0 avatar-group d-flex align-items-center"
>
<li
data-bs-toggle="tooltip"
data-popup="tooltip-custom"
data-bs-placement="top"
class="avatar avatar-xs pull-up"
title="Lilian Fuller"
>
<img
src="../../assets/img/avatars/5.png"
alt="Avatar"
class="rounded-circle"
/>
</li>
<li
data-bs-toggle="tooltip"
data-popup="tooltip-custom"
data-bs-placement="top"
class="avatar avatar-xs pull-up"
title="Sophia Wilkerson"
>
<img
src="../../assets/img/avatars/6.png"
alt="Avatar"
class="rounded-circle"
/>
</li>
<li
data-bs-toggle="tooltip"
data-popup="tooltip-custom"
data-bs-placement="top"
class="avatar avatar-xs pull-up"
title="Christina Parker"
>
<img
src="../../assets/img/avatars/7.png"
alt="Avatar"
class="rounded-circle"
/>
</li>
</ul>
</td>
<td><span class="badge rounded-pill bg-label-success me-1">Completed</span></td>
<td class="rounded-end-bottom">
<div class="dropdown">
<button
type="button"
class="btn p-0 dropdown-toggle hide-arrow"
data-bs-toggle="dropdown"
>
<i class="ri-more-2-line"></i>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"
><i class="ri-pencil-line me-1"></i> Edit</a
>
<a class="dropdown-item" href="javascript:void(0);"
><i class="ri-delete-bin-7-line me-1"></i> Delete</a
>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
Table Within Card
Providing example to add table inside the card. Here, we are using basic bootstrap card. If you do not want any padding outside a table, do not use .card-body inside .card.
Table within card
| Project | Client | Users | Status | Actions |
|---|---|---|---|---|
| Tours Project | Albert Cook |
|
Active |
|
| Sports Project | Barry Hunter |
|
Completed |
|
| Greenhouse Project | Trevor Baker |
|
Scheduled |
|
| Bank Project | Jerry Milton |
|
Pending |
|
<div class="table-responsive text-nowrap">
<table class="table card-table border-top border-bottom">
<thead>
<tr>
<th>Project</th>
<th>Client</th>
<th>Users</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody class="table-border-bottom-0">
<tr>
<td><i class="ri-suitcase-2-line ri-20px text-danger me-4"></i><span class="fw-medium">Tours Project</span>
</td>
<td>Albert Cook</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="../../assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="../../assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="../../assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge rounded-pill bg-label-primary me-1">Active</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i
class="ri-more-2-line"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="ri-pencil-line me-1"></i> Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="ri-delete-bin-7-line me-1"></i>
Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><i class="ri-basketball-fill ri-20px text-info me-4"></i><span class="fw-medium">Sports Project</span></td>
<td>Barry Hunter</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="../../assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="../../assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="../../assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge rounded-pill bg-label-success me-1">Completed</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i
class="ri-more-2-line"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="ri-pencil-line me-1"></i> Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="ri-delete-bin-7-line me-1"></i>
Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><i class="ri-leaf-fill ri-20px text-success me-4"></i><span class="fw-medium">Greenhouse
Project</span></td>
<td>Trevor Baker</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="../../assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="../../assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="../../assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge rounded-pill bg-label-info me-1">Scheduled</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i
class="ri-more-2-line"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="ri-pencil-line me-1"></i> Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="ri-delete-bin-7-line me-1"></i>
Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><i class="ri-bank-fill ri-20px text-primary me-4"></i><span class="fw-medium">Bank Project</span></td>
<td>Jerry Milton</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="../../assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="../../assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="../../assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge rounded-pill bg-label-warning me-1">Pending</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i
class="ri-more-2-line"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="ri-pencil-line me-1"></i> Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="ri-delete-bin-7-line me-1"></i>
Delete</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>Responsive tables
Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a .table with .table-responsive. Or, pick a maximum breakpoint with which to have a responsive table up to by using .table-responsive-{sm|md|lg|xl|xxl}.
Across every breakpoint, use .table-responsive for horizontally scrolling tables.
| # | Table heading | Table heading | Table heading | Table heading | Table heading | Table heading | Table heading | Table heading | Table heading |
|---|---|---|---|---|---|---|---|---|---|
| 1 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
| 2 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
| 3 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
<div class="table-responsive text-nowrap">
<table class="table">
<thead>
<tr class="text-nowrap">
<th>#</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
</tr>
</thead>
<tbody class="table-border-bottom-0">
<tr>
<th scope="row">1</th>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
</tbody>
</table>
</div>