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
  • Avatar
  • Avatar
  • Avatar
Active
Sports Project Barry Hunter
  • Avatar
  • Avatar
  • Avatar
Completed
Greenhouse Project Trevor Baker
  • Avatar
  • Avatar
  • Avatar
Scheduled
Bank Project Jerry Milton
  • Avatar
  • Avatar
  • Avatar
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-22px 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-22px 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-22px 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-22px 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
  • Avatar
  • Avatar
  • Avatar
Active
Sports Project Barry Hunter
  • Avatar
  • Avatar
  • Avatar
Completed
Greenhouse Project Trevor Baker
  • Avatar
  • Avatar
  • Avatar
Scheduled
Bank Project Jerry Milton
  • Avatar
  • Avatar
  • Avatar
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-22px 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-22px 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-22px 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-22px 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
  • Avatar
  • Avatar
  • Avatar
Active
Sports Project Barry Hunter
  • Avatar
  • Avatar
  • Avatar
Completed
Greenhouse Project Trevor Baker
  • Avatar
  • Avatar
  • Avatar
Scheduled
Bank Project Jerry Milton
  • Avatar
  • Avatar
  • Avatar
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-22px 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-22px 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-22px 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-22px 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
  • Avatar
  • Avatar
  • Avatar
Active
Sports Project Barry Hunter
  • Avatar
  • Avatar
  • Avatar
Completed
Greenhouse Project Trevor Baker
  • Avatar
  • Avatar
  • Avatar
Scheduled
Bank Project Jerry Milton
  • Avatar
  • Avatar
  • Avatar
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-22px 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-22px 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-22px 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-22px 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>Project</th>
        <th>Client</th>
        <th>Users</th>
        <th>Status</th>
        <th>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.

List of Projects
Project Client Users Status Actions
Tours Project Albert Cook
  • Avatar
  • Avatar
  • Avatar
Active
Sports Project Barry Hunter
  • Avatar
  • Avatar
  • Avatar
Completed
Greenhouse Project Trevor Baker
  • Avatar
  • Avatar
  • Avatar
Scheduled
Bank Project Jerry Milton
  • Avatar
  • Avatar
  • Avatar
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-22px 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-22px 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-22px 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-22px 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
  • Avatar
  • Avatar
  • Avatar
Active
Sports Project Barry Hunter
  • Avatar
  • Avatar
  • Avatar
Completed
Greenhouse Project Trevor Baker
  • Avatar
  • Avatar
  • Avatar
Scheduled
Bank Project Jerry Milton
  • Avatar
  • Avatar
  • Avatar
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-22px 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-22px 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-22px 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-22px 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
  • Avatar
  • Avatar
  • Avatar
Active
Sports Project Barry Hunter
  • Avatar
  • Avatar
  • Avatar
Completed
Greenhouse Project Trevor Baker
  • Avatar
  • Avatar
  • Avatar
Scheduled
Bank Project Jerry Milton
  • Avatar
  • Avatar
  • Avatar
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-22px 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-22px 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-22px 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-22px 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
  • Avatar
  • Avatar
  • Avatar
Active
Sports Project Barry Hunter
  • Avatar
  • Avatar
  • Avatar
Completed
Greenhouse Project Trevor Baker
  • Avatar
  • Avatar
  • Avatar
Scheduled
Bank Project Jerry Milton
  • Avatar
  • Avatar
  • Avatar
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-22px 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-22px 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-22px 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-22px 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
  • Avatar
  • Avatar
  • Avatar
Active
Sports Project Barry Hunter
  • Avatar
  • Avatar
  • Avatar
Completed
Greenhouse Project Trevor Baker
  • Avatar
  • Avatar
  • Avatar
Scheduled
Bank Project Jerry Milton
  • Avatar
  • Avatar
  • Avatar
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-22px 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-22px 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-22px 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-22px 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
  • Avatar
  • Avatar
  • Avatar
Active
Sports Project Barry Hunter
  • Avatar
  • Avatar
  • Avatar
Completed
Greenhouse Project Trevor Baker
  • Avatar
  • Avatar
  • Avatar
Scheduled
Bank Project Jerry Milton
  • Avatar
  • Avatar
  • Avatar
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-22px 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-22px 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-22px 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-22px 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
  • Avatar
  • Avatar
  • Avatar
Active
Sports Project Barry Hunter
  • Avatar
  • Avatar
  • Avatar
Completed
Tours Project Albert Cook
  • Avatar
  • Avatar
  • Avatar
Active
Greenhouse Project Trevor Baker
  • Avatar
  • Avatar
  • Avatar
Scheduled
Bank Project Jerry Milton
  • Avatar
  • Avatar
  • Avatar
Pending
UI/UX Project Sarah Banks
  • Avatar
  • Avatar
  • Avatar
Active
Custom Security Ted Richer
  • Avatar
  • Avatar
  • Avatar
Scheduled
Latest Bootstrap Perry Parker
  • Avatar
  • Avatar
  • Avatar
Pending
Angular UI Ana Bell
  • Avatar
  • Avatar
  • Avatar
Completed
Bootstrap UI Jerry Milton
  • Avatar
  • Avatar
  • Avatar
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-22px 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-22px 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-22px 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-22px 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-22px 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-22px 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-22px 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-22px 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-22px 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>
          <i class="ri-pulse-line ri-22px 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>
          <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
  • Avatar
  • Avatar
  • Avatar
Active
Sports Project Barry Hunter
  • Avatar
  • Avatar
  • Avatar
Completed
Greenhouse Project Trevor Baker
  • Avatar
  • Avatar
  • Avatar
Scheduled
Bank Project Jerry Milton
  • Avatar
  • Avatar
  • Avatar
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-22px 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-22px 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-22px 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-22px 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>
© 2017- Pixinvent, Hand-crafted & Made with ❤️